title: VueJS - Interpolate a string within a string
body: <p>In VueJS, is there a way to interpolate a string <em>within</em> a string, either in the template or in the script? For example, I want the following to display <code>1 + 1 = 2</code> instead of <code>1 + 1 = {{ 1 + 1 }}</code>.</p>
  
  <pre><code>&lt;template&gt;
      {{ myVar }}
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data() {
              "myVar": "1 + 1 = {{ 1 + 1 }}"
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Edit: to better illustrate why I would need this, here's what my actual data looks like:</p>
  
  <pre><code>section: 0,
  sections: [
      {
          inputs: {
              user: {
                  first_name: {
                      label: "First Name",
                      type: "text",
                      val: ""
                  },
                  ...
              },
              ...
          },
          questions:  [
              ...
              "Nice to meet you, {{ this.section.inputs.user.first_name.val }}. Are you ...",
              ...
          ]
      },
      ...
  ],
  </code></pre>
  
  <p><code>this.section.inputs.user.first_name.val</code> will be defined by the user. While I could rebuild the question properties as computed properties, I would rather keep the existing data structure in tact.</p>