Vuejs Component

The code of component!
The impportant thing here is the event input, this name must be exactly this to vue handle the bind of value propoerty outside de component! 

<template lang="html">
  <div>
    <div
      id='on'
      @click="switched(true)"
      :class="{active: value}">On</div>

      <div
        id='off'
        @click="switched(false)"
        :class="{active: !value}">Off</div>

        {{ value }}
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  props: ['value'],
  methods: {
    switched (isOn) {
      this.$emit('input', isOn)
    }
  }
}
</script>

<style lang="css">
#on, #off {
    width: 40px;
    height: 20px;
    background-color: lightgray;
    padding: 2px;
    display: inline-block;
    margin: 10px -2px;
    box-sizing: content-box;
    cursor: pointer;
    text-align: center;
}

#on:hover, #on.active {
    background-color: lightgreen;
}

#off:hover, #off.active {
    background-color: lightcoral;
}
</style>

And calling the component
<template>
    <div class="container">
        <form>
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                    <h1>File a Complaint</h1>
                    <hr>
                    <div class="form-group">
                        <label for="email">Mail</label>
                        <input
                                v-model='userData.email'
                                type="text"
                                id="email"
                                class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input
                                v-model.lazy='userData.password'
                                type="password"
                                id="password"
                                class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="age">Age</label>
                        <input
                                v-model.number="userData.age"
                                type="number"
                                id="age"
                                class="form-control">
                    </div>

                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 form-group">
                    <label for="message">Message</label><br>
                    <!-- Interpolation between <textarea>{{ test }}</textarea> doesn't work!-->
                    <textarea
                            id="message"
                            rows="5"
                            class="form-control"
                            v-model="userData.message"
                            ></textarea>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                    <div class="form-group">
                        <label for="sendmail">
                            <input
                                    type="checkbox"
                                    id="sendmail"
                                    value="SendMail"
                                    v-model="userData.sendMail"> Send Mail
                        </label>
                        <label for="sendInfomail">
                            <input
                                    type="checkbox"
                                    id="sendInfomail"
                                    value="SendInfoMail"
                                    v-model="userData.sendMail"> Send Infomail
                        </label>
                    </div>

                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 form-group">
                    <label for="male">
                        <input
                                type="radio"
                                id="male"
                                value="Male"
                                v-model="userData.gender"> Male
                    </label>
                    <label for="female">
                        <input
                                type="radio"
                                id="female"
                                value="Female"
                                v-model="userData.gender"> Female
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 from-group">
                    <label for="priority">Priority</label>
                    <select
                            id="priority"
                            class="form-control"
                            v-model="userData.priority">
                        <option v-for="priority in userData.priorities" :selected="userData.priority">{{ priority }}</option>
                    </select>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                    <button
                            class="btn btn-primary">Submit!
                    </button>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                    <app-switch v-model="dataSwitch"></app-switch>
                </div>
            </div>


        </form>
        <hr>
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>Your Data</h4>
                    </div>
                    <div class="panel-body">
                        <p><strong>Mail:</strong> {{ userData.email }}</p>
                        <p><strong>Password:</strong> {{ userData.password }}</p>
                        <p><strong>Age:</strong> {{userData.age}}</p>
                        <p><strong>Message:</strong> {{userData.message}} </p>
                        <p><strong>Send Mail?</strong></p>
                        <ul>
                            <li v-for="k in userData.sendMail">{{ k }}</li>
                        </ul>
                        <p><strong>Gender:</strong> {{ userData.gender }}</p>
                        <p><strong>Priority:</strong> {{ userData.priority }}</p>
                        <p><strong>Switched:</strong> {{ dataSwitch }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Switch from './Switch.vue'

export default {
  data () {
    return {
      userData: {
        email: '[email protected]',
        password: 'senha',
        age: 34,
        message: '',
        sendMail: [],
        gender: 'Male',
        priority: '',
        priorities: ['Low', 'Medium', 'Hight']
      },
      dataSwitch: false
    }
  },
  components: {
    'app-switch': Switch
  }
}
</script>

<style>

</style>