How to properly wrap foreign components?

Question

Vue.js

Good afternoon.

I found someone else's cool input, I want to correct it and use it with my settings. How to "wrap" it correctly so as not to change the component itself? In other words, I want to bring v-model to AlienComponent while maintaining reactivity.

I'm trying to implement something like this:

AlienComponent.vue

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

<script>
export default {
  name: 'alien-component',
  props: { value: [String] }
};
</script>

MyCoolInput.vue

<template>
  <div>
    <label>{{ label }}</label>
    <alien-component
      :value="value"
      @input="$emit('input', this.$event.target.value)" 
    />
    <!-- 
      @input="$emit('input', this.$event.target.value)" 
      вызывает ошибку: Avoid mutating a prop directly since the value will be overwritten
    -->
  </div>
</template>

<script>
import AlienComponent from './AlienComponent.vue';
export default {
  name: 'my-cool-input',
  components: { AlienComponent },
  props: { value: [String], label: [String] }
};
</script>

MyApp.vue

<template>
  <div>
    <h1>TEST</h1>
    <my-cool-input label="ввод:" v-model="my_value"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      my_value: 'test value'
    };
  }
};
</script>

Thank you for your advice.

Answer 1

<alien-component
  :value="value"
  @input="$emit('input', this.$event.target.value)" 
/>

You don't need any targets, you get the value itself from the component, so it would be correct like this:

<alien-component
  :value="value"
  @input="$emit('input', $event)" 
/>