Cacher is the code snippet organizer for pro developers

import Vue from 'vue'
import App from 'App'

new Vue({
  ...App,
  el: '#app'
})

<template>
<div class="radio">
  <input type="radio" :value="data" v-model="model" :name="name">
  <label>
    <slot>{{label}}</slot>
  </label>
</div>
</template>

<script>
export default {
  props: {
    label: String,
    name: String,
    value: null,
    data: null
  },
  computed: {
    model: {
      get () {
        return this.value
      },

      set (newModel) {
        this.$emit('input', newModel)
      }
    }
  }
}
</script>

<style>
.radio [type="radio"]:checked {
  margin-right: 10px;
}
</style>

<template lang="pug">
.checkbox
  input(type='checkbox', :id='id', :value="data", v-model="model")
  label(:for='id')
    slot {{label}}
</template>

<script>
export default {
  props: {
    label: String,
    name: String,
    value: null,
    data: null
  },
  computed: {
    id () {
      return 'cb-' + this._uid
    },
    model: {
      get () {
        return this.value
      },

      set (newModel) {
        this.$emit('input', newModel)
      }
    }
  }
}
</script>

<style>
.checkbox [type="checkbox"]:checked + label {
  color: red
}
</style>

<template>
<div id="app">
  <radio name="frutas" data="1" label="Abacaxi" v-model="fruta"></radio>
  <radio name="frutas" data="2" v-model="fruta">
    Laranja
  </radio>
   <radio name="frutas" data="3" label="Melão" v-model="fruta"></radio>

  Fruta: {{fruta}}

  <select v-model="fruta">
    <option value="1">Abacaxi</option>
    <option value="2">Laranja</option>
    <option value="3">Melão</option>
  </select>

  <checkbox v-model="aceito">Aceito</checkbox> {{aceito}}

  <h4>Redes Sociais</h4>

  <checkbox v-for="(label, id) in redes" v-model="minhasRedes[id]">{{label}}</checkbox>

  <pre>{{minhasRedes}}</pre>


</div>
</template>

<script>
import Radio from 'Radio'
import Checkbox from 'Checkbox'

export default {
  components: {Radio, Checkbox},
  data () {
    return {
      fruta: null,
      aceito: false,
      redes: {
        1: 'Facebook',
        2: 'Google Plus',
        3: 'Twitter',
        4: 'Instagram'
      },
      minhasRedes: {
        1: false,
        2: true,
        3: true,
        4: false
      }
    }
  }
}
</script>