zesty-vue-example.js

<div id="vueApp">
    <div>
        <h1>{{this.title}}</h1>
        {{this.content}}
        <p>Static test form the developer</p>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

var app = new Vue({
  el: '#vueApp',
  delimiters: ["{%","%}"],
  data: {
    message: '{{this.title}}',
    content: 'Hello world content',
    cookieExists: false
  },
  methods: {
    test: function(){
      alert('here')
    },
    getFreshContent: function () {
      fetch('/-/instant/7-0034c0-jp3fqm.json')
      .then(response => response.json())
      .then(data => {
        let content = data.data[0].content
        this.message = 'dynamiced loaded data from json: ' + content.title
      });
    }
  },
  created: function() {
    // this boolean check could be used against a cookie 
    if(this.cookieExists){
      this.getFreshContent()
    }
  },
  template: `
  <div>
    <h1>{%message%}</h1>
    {%content%}
    <button @click="test()">try me</button>
    <div v-if="cookieExists">Personalize!</div>
  </div>
  `
})

</script>