The following vue app should get some data from a firebase instance using the fetch method and display the data on the page.

UserExperiences.vue

<script>
import SurveyResult from './SurveyResult.vue';
//import axios from 'axios';

export default {
  components: {
    SurveyResult,
  },
  data() {
    return{
      results: []
    }
  },
  methods:{
    loadExperiences() {
      fetch('https://***.firebaseio.com/surveys.json')
      //axios.get('https://***.firebaseio.com/surveys.json')
      .then((response) => {
        if(response.ok) {
          return response.json();
        }
      })
      .then((data) => {
        const results = [];
        for (const id in data) {
          results.push({ 
            id: id, 
            name: data[id].name,
            rating: data[id].rating 
          });
        }
        this.results = results;
      });
    },
  },
};
  // mounted(){
  //   axios.get('https://***.firebaseio.com/surveys.json').then(response => {      
  //     this.results = response.data;
  //   })
  // },
</script>

SurveyResult.vue

<template>
  <li>
    <p>
      <span class="highlight">{{ name }}</span> rated the learning experience
      <span :class="ratingClass">{{ rating }}</span>.
    </p>
  </li>
</template>

<script>
export default {
  props: ['name', 'rating'],
  computed: {
    ratingClass() {
      return 'highlight rating--' + this.rating;
    },
  },
};
</script>

The data renders on the webpage correctly on the webpage using the fetch method. Is there a way to use axios.get instead? I've tried using the mounted vue property and it gets the data to appear on a blank screen in a json format, but I want the data to render on the webpage with the stylings and other vue components together.

This is what the page should look like for context: