How to pass v-model to child component?

Question

Vue.js

I'm using this plugin https://github.com/euvl/vue-js-toggle-button and I'd like to override default props values.
Following an example from the Internet, I made this component:

<template>
  <toggle-button v-bind="$attrs"
                 :color="color"
                 :height="height"
                 :width="width"
                 :fontSize="fontSize"
                 :labels="labels"/>
</template>

<script>
export default {
  name: 'Toggle',
  props: {
    name: {
      type: String
    },
    color: {
      type: [String, Object],
      default: '#09757A'
    },
    height: {
      type: Number,
      default: 26
    },
    width: {
      type: Number,
      default: 60
    },
    labels: {
      type: [Boolean, Object],
      default: () => {
        return {checked: 'YES', unchecked: 'NO'}
      },
    },
    fontSize: {
      type: Number,
      default: 11
    }
  }
}
</script>

Here's how I use it inside a form component:

<toggle name="alt_currency_status" v-model="alt_currency_status"/>

But the problem is that the alt_currency_status value of the form component doesn't change even though the toggler itself is switched. How to make alt_currency_status change.

Example on codesandbox - https://codesandbox.io/s/vigorous-darwin-4w3wg

Answer 1

In props add , and in -value: Boolean,<toggle-button

:value="value"
@input="$emit('input', $event)"

Or, to add . <toggle-buttonv-on="$listeners"