asdads

<template>

    Counter: {{ counter }}
    <button v-on:click="incCounter()">
        Inc
    </button>

    <br/><br/>
    Remaining to 10: {{ remainingTo10() }}

</template>

<script>

    class TestComp {

        // equivalent of "data()" - here declare all variables
        // that will become reactive after constructing class
        constructor() {
            this.counter = 0;
        }

        // lifecycle event - could be prefixed with $ for clarification
        // that it is internally-called method instead of standard user
        // event handler
        $ready() {
            window.alert( 'Our component is ready!' );
        }

        // standard user event handler (eg clicking button)
        incCounter() {
            this.counter++;
        }

        // computed property
        remainingTo10() {
            return 10 - this.counter;
        }

    }

    export default TestComp;

</script>