title: Errors when using template literals in Vue
body: <p>I have the following in my Vue project:</p>
  
  <pre><code>:customHighlight = `(props) =&gt; ({
            highlight: {
                pre_tags: ['&lt;mark&gt;'],
                post_tags: ['&lt;/mark&gt;'],
                fields: {
                    text: {},
                    title: {},
                },
                number_of_fragments: 0,
            },
        })`
  </code></pre>
  
  <p>and I am getting the following errors:</p>
  
  <pre><code>Module Warning (from ./node_modules/eslint-loader/index.js):
  error: 'v-bind' directives require an attribute value (vue/valid-v-bind) at src\views\Home.vue:24:7:
    22 |         ]"
    23 |
  &gt; 24 |       :customHighlight = `(props) =&gt; ({
       |       ^
    25 |           highlight: {
    26 |               pre_tags: ['&lt;mark&gt;'],
    27 |               post_tags: ['&lt;/mark&gt;'],
  
  
  error: Parsing error: unexpected-character-in-unquoted-attribute-value (vue/no-parsing-error) at src\views\Home.vue:24:26:
    22 |         ]"
    23 |
  &gt; 24 |       :customHighlight = `(props) =&gt; ({
       |                          ^
    25 |           highlight: {
    26 |               pre_tags: ['&lt;mark&gt;'],
    27 |               post_tags: ['&lt;/mark&gt;'],
  
  
  error: Parsing error: Line 1: Unterminated template
  
  &gt; 1 | 0(`(props))
      |    ^ (vue/no-parsing-error) at src\views\Home.vue:24:27:
    22 |         ]"
    23 |
  &gt; 24 |       :customHighlight = `(props) =&gt; ({
       |                           ^
    25 |           highlight: {
    26 |               pre_tags: ['&lt;mark&gt;'],
    27 |               post_tags: ['&lt;/mark&gt;'],
  
  
  error: Parsing error: unexpected-equals-sign-before-attribute-name (vue/no-parsing-error) at src\views\Home.vue:24:35:
    22 |         ]"
    23 |
  &gt; 24 |       :customHighlight = `(props) =&gt; ({
       |                                   ^
    25 |           highlight: {
    26 |               pre_tags: ['&lt;mark&gt;'],
    27 |               post_tags: ['&lt;/mark&gt;'],
  </code></pre>
  
  <p>I am getting this snippet from: <a href="https://opensource.appbase.io/reactive-manual/vue/search-components/datasearch.html" rel="nofollow noreferrer">https://opensource.appbase.io/reactive-manual/vue/search-components/datasearch.html</a></p>
  
  <p>I am a bit stuck and I am thinking that there is something wrong with the way he template literal is stuctured?</p>
  
  <p>Thanks!</p>