<template>
    <div>
        <div class="counter-text">
            Counter is: {{ count }}
        </div>
        <div class="counter-controls">
            <button @click="increase">
                Increase
            </button>
            <button @click="decrease">
                Decrease
            </button>
        </div>
    </div>
</template>
<script lang="js">
    export const INITIAL_COUNTER = 0;

    export default {
        name: 'Counter',
        data () {
            return {
                count: INITIAL_COUNTER
            };
        },
        methods: {
            increase() {
                this.count += 1;
            },
            decrease() {
                this.count -= 1;
            }
        }
    }
</script>
