title: Render the binding value in dynamic generated html template in vuejs2
body: <p>For following code: I want the "test1 span" could be changed with javascript. How can I do it? NOTE: the {{msg}} maybe from ajax output. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;!-- app --&gt;
          &lt;div id="app"&gt;
              &lt;span v-html="test"&gt;&lt;/span&gt;
              &lt;span v-html="test1"&gt;&lt;/span&gt;
              {{test3}}
          &lt;/div&gt;
          &lt;script&gt;
              var app1 = new Vue({
                  el: '#app',
                  data: {
                      test: '&lt;p style="color: red"&gt;THIS IS HTML&lt;/p&gt;',
                      test1: '{{msg}}',
                      test3: 20,
                      msg: 10
                  }
              })
  
              function change() {
                  app1.msg = Math.random()
                  app1.test3 = Math.random()
              }
              setInterval(change, 2000)
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Modification</strong>:<br>
  Maybe I need to make my question clear:<br>
  For next modify code, when launch the page, you will see <code>Go to Foo</code> link in the page, then you click the link, you will see <code>hello {{msg}}</code><br>
  <strong>NOTE</strong>: this comes from the remote server: <code>b.html</code>.<br>
  I set a timer there, every 2 seconds, change the value of <code>msg</code>, I wish the <code>{{msg}}</code> in page could change to a random number.  </p>
  
  <p><strong>main.html</strong>  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="app"&gt;
              &lt;p&gt;
              &lt;router-link to="/foo"&gt;Go to Foo&lt;/router-link&gt;
              &lt;/p&gt;
              &lt;router-view&gt;&lt;/router-view&gt;
          &lt;/div&gt;
  
          &lt;script&gt;
              const Foo = {
                  template: '&lt;div v-html="template1"&gt;&lt;/div&gt;',
  
                  data: function () {
                      return {
                          template1: null
                      }
                  },
                  created: function () {
                      this.fetchData()
                  },
                  watch: {
                      '$route': 'fetchData'
                  },
                  methods: {
                      fetchData () {
                          var that = this
                          $.get("http://localhost/try/b.html", function(data, status) {
                              that.template1 = data
                          })
                      }
                  }
              }
              const routes = [
              { path: '/foo', component: Foo }
              ]
  
              const router = new VueRouter({
                  routes
              })
  
              const app = new Vue({
                  router
              }).$mount('#app')
  
              function change() {
                  app.msg = Math.random()
              }
              setInterval(change, 2000)
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>b.html</strong>  </p>
  
  <pre><code>&lt;div&gt;
      hello
      {{msg}}
  &lt;/div&gt;
  </code></pre>