I'm completely new to VueJS and am trying to create a project tile list with different data values per tile. I use Vue CLI. I created a component which is my template for one project tile.

component TheProjectTile.vue :

<template>
  <router-link to="{{ project.url }}">
    <div
      class="row project-container"
      style="background-color: {{ project.backgroundcolor }};"
      v-scrollanimation
    >
      <div class="column column-60">
        <h2>{{ project.title }}</h2>
        <div class="button">view</div>
      </div>
      <div class="column">
        <img src="@/assets/img/{{ project.image }}" alt="{{ project.title }}" />
      </div>
    </div>
  </router-link>
</template>

<script type="text/javascript">
export default {
  props: { project: Object },
  data() {
    return {}
  }
}
</script>

Then I have my View on my Vue CLI application where I want to render the project tiles and where I want to give the data to the tiles:

View where the projects should be shown

<template>
  <div id="projekte">
    <section class="container">
      <div id="projects">
        <projectlist v-for="project in projects" :project="project" />
      </div>
    </section>
  </div>
</template>

<script>
import TheProjectTile from './components/TheProjectTile'

export default {
  components: {
    projectlist: TheProjectTile
  },
  data() {
    return {
      projects: [
        {
          url: '/projekte/client1',
          backgroundcolor: '#005ca9',
          title: 'Website client 1',
          img: 'client1.png'
        },
        {
          url: '/projekte/client2',
          backgroundcolor: '#c10b25',
          title: 'Website client 2',
          img: 'client2.png'
        }
      ]
    }
  }
}
</script>

What do I need to change that it works? :/