I'm having trouble using axios(my code will follow) but when i use {{response.data}} the site breaks and gives me a blank page as soon as i remove it, it works alright. I'm not too sure what I'm doing wrong, I'm quite new to using vue, vuetify and axios.

I've got a local server running for the database and the get request link works. it displays 3 columns of strings and 1 array and I'm looking to get the data from the array.

<template>
<v-app id="inspire"
     style="background-color: #e4e4e4">
<!-- to be deleted-->
<v-app-bar-nav-icon style="padding-left: 80px">
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">Login</router-link>
      <br>
      <vbtn>Logout</vbtn>
    </nav>
    <router-view/>
  </div>
</v-app-bar-nav-icon>
<!--end-->
<!-- profiles to login to-->
<v-main style="padding: 10rem">
  <v-container>
    <v-row>
      <v-col
          v-for="n in 10"
          :key="n"
          cols="5"
          style="background-color: #e4e4e4;">
        <v-card height="200" style="background-color: #a3a3a3; text-align: center">{{n}}</v-card>
      </v-col>
    </v-row>
  </v-container>
</v-main>
<!-- profiles to login to end-->
</v-app>
</template>

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld' ,
  mounted () {
  axios
    .get("http://localhost:8081/contractor?user_id=c65722")
    .then((response) => {
      this.posts = response.data
    })
  },
  data: () => ({
    ecosystem: [],
    importantLinks: [],
  }),
  methods: {}
}
</script>

'