What is the best way to use v-model without using it in the main app.js file?

Question

I was wondering i have this code inside my blade file:

<input type="text" class="form-control" :model="productname" id="name" name="name" aria-describedby="emailHelp" placeholder="Title" value="{{ old('name') }}" required>

and i want to create an 2 way data binding, so when user submitted 3 or more character to get an green background of this input field, but when they are less to get a red background. I tried to do this with vue-component, but it seems for whatever reason the vue-component does not have access to the main #app id which is assign to the main app blade template in order all vue code to have access to the html code and change it. I have created an vue-component called Upload inside ressources/assests/js/components/Upload.js, but when i write this code:

<template>
</template>

<script>
    export default {
        data() {
            return {
                productname: '',
            };
        },
        mounted() {
            console.log('Upload component', this.message);
        }
    }
</script>

and added of course to app.js like that Vue.component('upload-component', require('./components/Upload.vue')); and run - npm run dev to compile the code i am getting this error:

[Vue warn]: Property or method "productname" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Whatever when i write this code inside the main app.js file (resources/assests/js/app.js):

const app = new Vue({
    el: '#app',
    data() {
            return {
                productname: '',
            };
        },
});

everything is working fine and i dont get any errors, but i dont want that, as imagine for my website/app i have to have for example 100 v-models and i dont want to put them all inside the main app.js file. Is there other way to do this?

Can i still somehow make it work inside the vue component, so the component can see the v-model and not giving me this error?
If not, can i make it work and use vue inside the blade file something like that?
new Vue({ el: '#form', data: { productname: '' } });
but this code its not working. Thanks!

i manage to make it work thanks to this answer: https://stackguides.com/questions/52078215/laravel-5-7-vue-js-2-laravel-echo-pusher-how-to-make-them-work-together — Dimitar

Amon Jafarbay Amon Jafarbay · Accepted Answer · 2018-08-26T08:46:01

It's a bit tricky to make out what you are doing exactly, but your error is related to having no data property 'message', you have only a property called 'productname'.

If you want your component to communicate up to its parents or siblings you should read into emitting events in vue using

this.$emit

What is the best way to use v-model without using it in the main app.js file?

1 Answers