VUEX example within template

console.log

[Vue warn]: Property or method "products" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in root instance)
warn @ vue.min.js?2584471148241169295:525
warnNonPresent @ vue.min.js?2584471148241169295:1443
has @ vue.min.js?2584471148241169295:1475
(anonymous) @ VM4692:2
Vue._render @ vue.min.js?2584471148241169295:2220
updateComponent @ vue.min.js?2584471148241169295:2613
get @ vue.min.js?2584471148241169295:2936
run @ vue.min.js?2584471148241169295:3005
flushSchedulerQueue @ vue.min.js?2584471148241169295:2811
(anonymous) @ vue.min.js?2584471148241169295:477
nextTickHandler @ vue.min.js?2584471148241169295:426
vue.min.js?2584471148241169295:525 [Vue warn]: Property or method "pages" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in root instance)

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 grow" v-for="product in products" v-cloak>
              
                <router-link :to="{ name: 'product', path: '/products/:handle', params: { productId: product.id, productName: product.name}}">
               
                  <div class="inner-container relative">
                    
                    <div class="pad-normal absolute top-0 left-0 z-1 large--one-whole product-color">
                      <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>

            <div class="grid__item large--one-third medium--one-whole no-padding product grow" v-for="page in pages" v-cloak>
              <div class="inner-container relative">
                <div class="pad-normal absolute top-0 left-0 z-1 large--one-whole product-color">
                  <p class="univers uppercase smaller body-size">
                    ${ page.title }
                  </p>
                  <p class="lyon-text">
                    Influence
                  </p>
                </div>
                <img class="scale-with-grid archives-image" v-bind:src="page.image.src">
              </div>
            </div>
        </div>
      </template>

      <template id="product-detail-template">
        <div>${ $route.params.handle }</div>
        ${ $route.params }
      </template>
      
      <router-view>
      </router-view>

    </div>
  </div>
</section>

index.js

// Vuex store state

const PeopleListing = ('people-listing', {
    template: '#people-listing-template',
    delimiters: ['${', '}'],
    name: 'products',
    data: function() {
        return {
            products: [],
            pages: []
        }
    },
    mounted: function() {
        this.getAllProducts();
        this.getAllPages();
    },

    methods: {

        getAllProducts: function(){

            this.$http.get('/collections/homepage/products.json').then(function (response) {

                $.each(response.data.products, function(key, value) {
                    var product = value;
                    this.products.push(product);
                }.bind(this));

                
            }.bind(this), function (response) {

                console.log('error');

            });

        },

        getAllPages: function(){

            this.$http.get('https://d51952c49ad72eee2fdc18f47082a439:80c15656dcb216cd3314863597f6089b@in-grid.myshopify.com/admin/blogs/28462788/articles.json').then(function (response) {

                
                $.each(response.data.articles, function(key, value) {

                    this.pages.push(response.data.articles[key]);

                }.bind(this));

                
            }.bind(this), function (response) {

                console.log('error');

            });

        }

    },

    props: ['people-listing']

});

const ProductDetail = ('product-detail', {
    template: '#product-detail-template',
    delimiters: ['${', '}'],
    name: 'product-detail',
    props: ['productName', 'productId']

});

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

new Vue({
    router,
    // store,
    el: "#home-container",
    delimiters: ['${', '}'],
    methods: {

    	// Load nav in case we need to preload it later
    	// on for speed

        prerenderLink: function(e) {
            var head = document.getElementsByTagName("head")[0];
            var refs = head.childNodes;
            ref = refs[ refs.length - 1];

            var elements = head.getElementsByTagName("link");
            Array.prototype.forEach.call(elements, function(el, i) {
                if (("rel" in el) && (el.rel === "prerender"))
                    el.parentNode.removeChild(el);
            });

            var prerenderTag = document.createElement("link");
            prerenderTag.rel = "prerender";
            prerenderTag.href = e.currentTarget.href;
            ref.parentNode.insertBefore(prerenderTag,  ref);
        },

    }

});

ProductDetail is now a child route for the PeopleListing.
So your routes should look like this.

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