How to bind to a dynamic property from another component?

Question

JavaScript

There is a vuetifyjs table component in which I display my component number-input
Table:

<v-data-table
                :items="items"
              >
                <template slot="items" scope="props">
                  <td>{{ props.item.name }}</td>
                  <td  class="text-xs-right">{{ props.item.price }} р.</td>
                  <td  class="text-xs-right">
                    <number-input 
                      :val="props.item.count"
                      :min="1"
                      :max="props.item.stock"
                    />
                  </td>
                  <td  class="text-xs-right">{{ props.item.stock }} {{ props.item.unit }} </td>
                  <td  class="text-xs-center"><remove-btn :id='props.item.id' /></td>
                </template>
              </v-data-table>

The content of input-number

<template>
  <div class="input-number_wrapper">
    <span class="input-number-decrement" @click="decrement()">–</span>
    <input class="input-number" type="text" v-model="val" min="min" max="max">
    <span class="input-number-increment" @click="increment()">+</span>
  </div>
</template>

export default {
  data () {
    return {
    }
  },
  props: ['val','min','max'],
  methods: {
    decrement () {
      if ((this.val - 1) < this.min) {
        return;
      }
      this.val -= 1
    },
    increment () {
      if ((this.val + 1) > this.max) {
        return;
      }
      this.val += 1
    }
  }
}

How to track changes in the input correctly from the parent component?
Working with data using vuex. You can, of course, also pass the id of the element to the input component and change it in the store there, but I would like to use it in other places later.

Answer 1

$emit and v-on