How to sync v-model to customize Vue component with wrapper?

Question

I am newbie in VueJs. I want to create customize component with wrapper like this:

template: `<div class="wrapper">
            <input name="name" /> 
          </div>`,

when using component, I want to add v-model,

 <my-component v-model="form.input" />

But in actually, the value of model is bind just to the wrapper not to the input. If I change the model

form:{ input: "edited" }

that value only bind to wrapper like:

  <div class="wrapper" value="edited">
        <input name="name" /> 
   </div>    

is there any suggestion for my problem. I am using Vuejs-2.

Answer 1

At minimum, you would need to do something like this:

<div class="wrapper">
  <input
    :value="value"
    @input="$emit('input', $event.target.value)"
  /> 
</div>

props: ['value']