Vuetify Basic

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/0.16.6/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/0.16.6/vuetify.min.css">
  
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
    
  <div id="app">
    <v-app dark>
      <v-container fluid>
        <p>{{ selected }}</p>
        
        <v-checkbox @click.native='ask($event)' :label="`Checkbox 1: ${checkbox1.toString()}`" v-model="checkbox1"></v-checkbox>
      </v-container>
    <v-footer app></v-footer>
  </v-app>
</div>

JavaScript

Vue.use(Vuetify);

new Vue({
    el: '#app',
    data: () => ({
        selected: false,
        checkbox1: false
    }),
    methods: {
    	ask: function (event) {
      	answer = confirm('really')
        console.log('Answer: ' + answer)
        if (!answer) {
        	event.stopPropagation()
          event.preventDefault()
        }
        return answer
      }
    }
})