Client side events after page render

serving pages with with lambda is wonderful idea and now that I have played with this I've faced a problem with client side events.

So using the template directly and adding a simple button to the page and try click and triggering either data increment event or a method, for some reason nothing will happens.

index.vue

<template>
  <div>
    <h1>Nuxt Serverless Template {{ this.version }}</h1>
    <p>Say Hello to Node.js 8.10 in AWS Lambda</p>
    <router-link to="/hello">hello</router-link>
    <router-link to="/world">world</router-link>
    <button v-on:click="counter += 1">Add 1</button><!--button-->
    <p>The button above has been clicked {{ counter }} times.</p> <!--label to change when event pccurs-->
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide } from "nuxt-property-decorator";
import { State } from "vuex-class";

export default class Index extends Vue {
  @State((state) => state.version) private version: string;
  @Provide() counter = 1; //data section with counter

}
</script>

After the application is deployed and rendered through lambda the button does not do anything.

yarn sls:deploy

Same also happens when the application is started to locally

yarn start

Any idea why the client side does not do anything after the page has been rendered?

tonyfromundefined / nuxt-serverless

Client side events after page render #4