title: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead
body: <p>I am having trouble to understand how to pass a value to vue through html, it always gives me this error: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead </p>
  
  <p>Edit: I want to pass the value "country" to the vue instance, this does not work, can someone give me an example on HTML and vue side please?? </p>
  
  <p>This is my code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="image-slider" :country="@{{country}}"&gt;
  &lt;template id="slider-template"&gt;
  &lt;p&gt;
  &lt;a class="featured-providers-arrow-left" @click="prevRow"&gt;&lt;img src="{{route('cacheImage', ['newDesign', 'arrow.png']) }}"/&gt;&lt;/a&gt;
  &lt;/p&gt;
  &lt;a class="featured-providers-arrow-right" @click="nextRow"&gt;&lt;img src="{{route('cacheImage', ['newDesign', 'arrow.png']) }}"/&gt;&lt;/a&gt;
  &lt;/template&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>VUE</p>
  
  <pre><code>new Vue({
  el: '#image-slider',
    data: {
      providers: []
    },
    mounted(){
      this.country = this.$el.attributes.country.value;
      this.$http.get('/provider-' + this.country).then(response =&gt; response.data = this.providers);/*this.providers = response.data);*/
    },
    currentNumber: 0,
    timer:null
  }
  </code></pre>