Benjamin doesn't understand scope...

App.vue

<template>
<div id="app">
  <ComponentOne/>
</div>
</template>

<script>
import {store} from './store.js'
import ComponentOne from './ComponentOne'

export default {
    name: 'App',
    data: function () {
        return {
            sharedState: store.state
        }
    },
    components: {
        ComponentOne,
    },
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

ComponentOne.vue

<template>
    <div>
        <h2>{{ sharedState.msg }}</h2>
        <input type="button" value="Set sharedState.msg" v-on:click.prevent="sharedState.msg = 'Message set directly from first button'">
        <input type="button" value="Fire storeFunctionMethod" v-on:click.prevent="storeFunctionMethod('Message set from second button via storeFunctionMethod')">
        <input type="button" value="Fire store.storeFunction" v-on:click.prevent="store.storeFunction('Message set from third button via store.storeFunction')">
    </div>
</template>

<script>
import {store} from './store.js'

export default {
    name: 'ComponentOne',
    data(){
        return {
            sharedState: store.state
        }
    },
    methods: {
        storeFunctionMethod(val) {
            store.storeFunction(val)
        }
    },
    mounted() {
        store.storeFunction("Message set when ComponentOne mounted")
    }
}
</script>

<style>

</style>

main.js

import Vue from 'vue'
import App from './App'
import {store} from './store.js'

Vue.config.productionTip = true

new Vue({
  el: '#app',
  components: {
      App
  },
  data: {
    sharedState: store.state
  },
  template: '<App/>'
})

store.js

export const store = {
  state: {
    msg: '',
  },
  storeFunction: function (inp) {
      console.log("Fired storeFunction: "+inp)
      this.state.msg = inp
  }
}