<template>
<div id="app">
    <counter></counter>
    <p>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </p>
    <child :level="1">Hello world!</child>
    <child :level="3">Hello world!</child>
    <my-paragraph></my-paragraph>
</div>
</template>

<script>
import counter from './components/counter.vue'
import child from './components/child.vue'
import myParagraph from './components/myParagraph.vue'

import { store } from './main.js'

export default {
    name: 'app',
    data() {
        return {

        }
    },
    computed: {
        count() {
            return store.state.count
        }
    },
    methods: {
        increment() {
            store.commit('increment')
        },
        decrement() {
            store.commit('decrement')
        }
    },
    components: {
        counter,child,myParagraph
    }
}
</script>