title: How to change backgound image when hovering over elements with Vue.js?
body: <p>I have to change a background image when hovering over four different elements (one image for each element)</p>
  
  <p>I've tried this:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="projects"&gt;
    &lt;a v-on:mouseover="hover=myimage1" v-on:mouseout="hover=myimage1"&gt;
      &lt;router-link to="/project1"&gt;Project1&lt;/router-link&gt;
    &lt;/a&gt;
  
    &lt;a v-on:mouseover="hover=myimage2" v-on:mouseout="hover=myimage1"&gt;
      &lt;router-link to="/project2"&gt;Project2&lt;/router-link&gt;
    &lt;/a&gt;
  
    &lt;a v-on:mouseover="hover=myimage3" v-on:mouseout="hover=myimage1"&gt;
      &lt;router-link to="/project3"&gt;Project3&lt;/router-link&gt;
    &lt;/a&gt;
  
    &lt;a v-on:mouseover="hover=myimage4" v-on:mouseout="hover=myimage1"&gt;
      &lt;router-link to="/project3"&gt;Project3&lt;/router-link&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="images"&gt;
    &lt;div id="img1"&gt;
      {{ hover }}
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>&lt;script&gt;
  import myimage from '../assets/images/posters/poster1-2.png'
  import myimage2 from '../assets/images/front2.png'
  import myimage3 from '../assets/images/front3.png'
  import myimage4 from '../assets/images/front4.png'
  export default {
    name: 'Index',
    data () {
      return {  
        hover: '',        
        myimage1,
        myimage2,
        myimage3,
        myimage4
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem is that it doesn't show the actual images, but strings:</p>
  
  <p><em>/static/img/poster1-2.e797348.png</em></p>
  
  <p>What do I do?</p>