How to solve the avoid mutating a prop - vue.js

Question

I'm trying to compare prices from last year and this year and the problem I'm getting is this:
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value
I understand what it's saying but I'm not sure how to solve it.
Here is my code:
<template>
<div class="content-header">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<div class="row mb-2">
<div class="col-sm-12">
<label for="year_select">Select Year</label>
<select id="year_select" #change="getYearComparison()" class="form-control" style="width: 100%;" v-model="yearSelect">
<option v-for="year in years" :value="year.id">
{{ year.year }}
</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<table class="table">
<thead>
<tr class="text-center">
<th colspan="4" style="border-right: #dee2e6 solid 1px">
Previous Year
</th>
<th colspan="3" style="border-right: #dee2e6 solid 1px">
This year
</th>
<th colspan="2">
Variance
</th>
</tr>
</thead>
<tr v-for="c in compare">
<td>
{{ c.prev_price }}
</td>
<td>
{{ c.curr_price }}
</td>
<td style="border-right: #dee2e6 solid 1px">
{{ c.v_price }}
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['compare'],
data(){
return {
years: [],
tariffSelect: null
}
},
computed: {
},
methods: {
getYears(){
axios.get('/api/years/getYears').then(response => {
this.years = response.data.years;
});
},
getYearComparison(){
axios.get(`/api/product/${this.tariffSelect}/comparison`).then(response => {
this.compare = response.data.compare;
})
}
},
mounted(){
this.getYears();
}
}
</script>

Answer 1

compare is a prop, meaning that it's to be transferred to your component, the "child" by another component (or the Vue app), the "parent". On the other end, your child component should communicate a value change to its parent using an event.
In your parent component, you can do this:
<template>
<child-component :compare="compare" #updateCompare="compare = $event"/>
</template>
<script>
export default {
data() {
return { compare: '' }; // Put a default value here that makes sense
}
};
</script>
And in your child component, you need to emit the event, so you can replace this line:
this.compare = response.data.compare;
By this one:
this.$emit('updateCompare', response.data.compare);
You can take a look at the documentation for events.