Health Test App, It Returns a Score Based on the Answers Given Here is my parent component: App.vue. I was wondering what improvements I could make to the code here. 

Application Description


  This application was built off the Vue.js framework and utilizes a
  Laravel REST API I created to fetch custom data. It stores and tracks
  your ‘health score’, which is determined by the answers you submit in
  the test. Each answer has a value. So, the unhealthiest answer has a
  value of 0, the second-least healthiest 1, second-most healthiest 2,
  and the healthiest answer 3. The values of the answers you submit are
  aggregated throughout the test via local storage. After the final
  question has been answered, your total health score is returned. Your
  final score will determine the message you receive.


&lt;template&gt;
  &lt;div id="app"&gt;
    &lt;div id="nav"&gt;
      &lt;!--once the testData array has received its first element, then render the test data
      (this prevents error in dev tools)--&gt;
      &lt;router-view
        v-if="testData.length" 
        :currentTestData = testData[testDataIndex]
        :testDataIndex = testDataIndex
        :nextAndResetIndices="nextAndResetIndices"
        :selectAnswer="selectAnswer"
        :selectedIndex="selectedIndex"
        :submitAnswer="submitAnswer"
        :submittedIndex="submittedIndex"
        :healthScore="healthScore"
        :setStorage="setStorage"
        :getStorage="getStorage"
        :resetStorage="resetStorage"
        :message="message"
        :returnMessage="returnMessage"

      /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  data() {
    return {
      testData: [],
      testDataIndex: 0,
      selectedIndex: null,
      submittedIndex: null,
      healthScore: 0,
      message: ''
    }
  },  
  methods: {
    nextAndResetIndices() {
      this.testDataIndex++
      this.selectedIndex = null
      this.submittedIndex = null
      // takes user to health score page
      if (this.testDataIndex &gt; 6) {
        window.location.href = '/hs'
      }
    },
    selectAnswer(index) {
      this.selectedIndex = index
      console.log(index)
    },
    submitAnswer(selectedIndex) {
      this.submittedIndex = this.selectedIndex
      console.log(this.submittedIndex)
      // health score increments by the submitted index
      this.healthScore += this.submittedIndex
    },
    resetStorage() {
      localStorage.setItem('SavedHealthScore', 0)
    }
  },
  computed: {
    setStorage() {
      // prevents the stored health score from mimicing the original and reverting back to 0
      if (this.healthScore !== 0) {
        localStorage.setItem('SavedHealthScore', this.healthScore)
      }
    },
    getStorage() {
      this.healthScore = parseInt(localStorage.getItem('SavedHealthScore'))
    },
    toZero() {
      // returns the health score back to 0
      this.healthScore = 0
    },
    returnMessage() {
      if (this.healthScore &lt; 8)
        this.message = 'Get to the hospital now! '
      else if (this.healthScore &gt;= 8 &amp;&amp; this.healthScore &lt; 15)
        this.message = "Not bad. You'll probably live! ‍♂️"
      else 
        this.message = "You're very healthy. Congrats! ‍⚕️"
    }
  },
  mounted() {
    fetch('http://127.0.0.1:8000/api/testdata', {
    method: 'get'
  })
    .then((response) =&gt; {
    return response.json()
  })
    // 'jsonData' refers to the json parsed response
    .then((jsonData) =&gt; {
      this.testData = jsonData.data
  })
}}
&lt;/script&gt;
If you wish to keep your implementation scheme, I only have one large critique:

Names are important

Your naming scheme should allow a 3rd party to understand your code from a cursory glance. You have a lot of sneaky implementations tucked into your functions that aren't expressed in your naming convention.

All of your operations are stateful, which is technically ok but you use a lot of verbage that makes it sound like they're functional operations with actual return values. All of your functions act on stateful variables. Your naming convention should reflect this through the use of verb phrases, as opposed to nouns.

resetStorage: A good variable name. It is a verb that acts on localStorage

getStorage: Misleading. The traditional usage of the verb get is to retrieve a value or perform a computation (and return it). You are assigning this.healthScore. getStorage doesn't even have a return value. A more apt name would be something more like setHealthScoreFromLocalStorage.

toZero: What exactly is being set to zero? From the rest of your code (looking at resetStorage) I can infer that the value of 0 is the default value. It should be more along the lines of resetHealthScore or clearHealthScore.

returnMessage: It is updating this.message. So something more like updateHealthMessage?