JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>

<div id="vue">
    <topsection></topsection>
    <contentsection></contentsection>
</div><!-- #vue -->

JavaScript

const store = new Vuex.Store({
    state: {
        pageTitle: "My Vuex Thing"
    },
    mutations: {
        pageTitle(state,title){
            state.pageTitle = title;
        }
    }
});

const topsection = {
    template: `<h1>{{ pageTitle }}</h1>`,
    computed: {
        pageTitle(){
            return store.state.pageTitle;
        }
    }
};
const contentsection = {
        template: `<div id="content">
            Enter a page title: <input type="text" name="pageTitle" v-model="pageTitle">
        </div>
        `,
        computed: {
            pageTitle:{
				get: function(){
					return store.state.pageTitle;
				},
            	set: function(newTitle){
            		store.commit('pageTitle',newTitle);
            	}
        	}
        }
    }; 

var v = new Vue({
    el: '#vue',
    store,
    components: {
        topsection,
        contentsection
    }
});