[SOLVED] Custom myinput component: 2way binding

I solved the question and this is the solution.
the mycomponent.vue:

<template>
  <input type="text" :value="value" @input="$emit('input', $event.target.value)">
</template>

<script>
  export default {
    props: {
      value:String
    },
  }
</script>

its usage:

<myinput  v-model="myvariable" />

It works well. The myvariable is dinamically handled in bidirectional mode.
Here an example

this is the original message

Hi all.
I need to create a custom myinput component. This is my code:

<template>
    <input v-model="variable">
</template>


<script>
    export default {
        name:"myinput",
        props:{
            variable: "",
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

and I call it in this way:

<div class="card-body">
                        <myinput
                            :variable="locvar"
                        ></myinput>
                    </div>

But it doesn’t work because the locvar isn’t updated. What’s the solution?
Thank you very mutch

When using the : on a value in your template, you need to actually put something in it.
If you only have one set of "", then what you are passing to it is a VARIABLE named locvar.
if you intend to pass in a string that is “locvar” to :variable="'locvar'"
Otherwise, if locvar is a variable and you already know this, locvar is not set in your script. (Which we can’t see)

thank you for your reply. I solved and this is the solution:
this is the myinput component:

<template>
  <input type="text" :value="value" @input="$emit('input', $event.target.value)">
</template>

<script>
  export default {
    props: {
      value:String
    },
  }
</script>

and when I need to use it I simply call it int this way:

<myinput  v-model="myvariable" />

In this way I’m using the bidirectional binding.
I found a valid solution here: code_example
Thank you very much.
I hope this can help someone.