VUEX example within template

index.html

<section id="home-container" class="parralex-scroll">
  <div class="wrapper">
    <div class="grid">
      <template id="people-listing-template">
        <div class="wrapper grid" id="start-parralex">

            <div class="grid__item large--one-third medium--one-whole no-padding product" v-for="product in products" v-cloak>
              
                <router-link :to="{ name: 'product', params: { handle: product.handle }}">
               
                  <div class="inner-container relative">
                    
                    <div class="pad-normal absolute top-0 left-0 large--one-whole">
                      <p class="lyon-text">
                        ${ product.title }, <span>£${ product.variants[0].price }</span>
                      </p>
                      <p class="univers uppercase smaller body-size">
                        Buy now
                      </p>
                    </div>

                    <div v-for="image in product.images">
                      <img class="scale-with-grid archives-image" v-bind:src="image.src" v-bind:alt="image.id">
                    </div>

                  </div>

                </router-link>
            
            </div>

          <router-view></router-view>
        </div>
      </template>

      <template :name="product-detail" id="product-detail-template">
        <div>
        <h1>${ title }</h1>
        </div>
      </template>
    </div>
  </div>
</section>

index.js

// Vuex store state

const store = new Vuex.Store({
  state: {
    products: [],
    currentProduct: {}
  },
  actions: {
    getProduct ({commit}, id) {
      commit('GET_PRODUCT', id)
    }
  },
  mutations: {
    GET_PRODUCT (state, id) {
      console.log(JSON.stringify(state))
      // console.log(`Setting product to ${state.products[parseInt(id)]} with id ${id}`)
      state.currentProduct = state.products[parseInt(id)]
    }
  },
  getters: {
    products: state => state.products,
    currentProduct: state => state.currentProduct
  },  
  modules: {
    
  }
})

export default store

const ProductDetail = ('product-detail', {
    template: '#product-detail-template',
    delimiters: ['${', '}'],
    name: 'product-detail',
    created () {
        this.$store.dispatch('getProduct', this.$store.state.route.params.handle )
    },
    methods: {
    },
    computed: {
        title () {
            return this.$store.getters.currentProduct
        }
    },
    props: ['product-detail']

});


const router = new VueRouter({
  mode: 'history',
  routes: [
        {path: '/', component: PeopleListing},
        {name: 'product', path: '/products/:handle', component: ProductDetail }
    ]
});

sync(store, router)