Change props value?

Question

Vue.js

<template>
  <v-dialog
    ref="menu1"
    v-model="menu1"
    max-width="415"
    min-width="290"
  >
    <template v-slot:activator="{ on }">
      <v-text-field
        v-model="formatText"
        v-on="on"
        label="Выберите дату"
        color="primary"
      />
    </template>
    <div class="d-flex">
      <v-date-picker
        v-model="selected"
        no-title
        range
        header-color="primary"
        color="primary"
      >
        <v-spacer></v-spacer>
        <v-btn
          text
          @click="menu1 = false"
        >
          ок
        </v-btn>
      </v-date-picker>
      <div
        v-if="showBtns"
        class="datepicker__btns d-flex flex-column align-baseline">
        <v-btn text color="primary" @click="selectDaysRange(7)">За неделю</v-btn>
        <v-btn text color="primary" @click="selectDaysRange(30)">За месяц</v-btn>
        <v-btn text color="primary" @click="selectDaysRange(365)">За год</v-btn>
      </div>
    </div>
  </v-dialog>
</template>
<script>
import moment from 'moment';

export default {
  name: 'CustomDatePicker',
  props: ['showBtns', 'value'],
  data() {
    return {
      menu1: null,
      dates: [],
      newValue: this.value,
      now: new Date(),
      startDate: moment(this.now).format('YYYY-MM-DD'),
    };
  },
  computed: {
    formatText() {
      const arr = [];
      this.value.map((date) => arr.push(moment(date).format('DD.MM.YYYY')));
      return arr.join(' - ');
    },
    selected: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  methods: {
    selectDaysRange(days) {
      this.value= []; //вот тут ошибка, потому что пытаюсь напрямую менять props
      const endDate = moment(this.now).subtract(days, 'days').format('YYYY-MM-DD');
      this.value.push(endDate, this.startDate);
    },
  },
};
</script>

There is a component based on vuetift v-date-picker
I'm trying to add functionality to select the date "For a month, for a year"
But when the method is called, it gives an error that I'm trying to change the vue value in the child component, which is not correct.
How can I implement this functionality?

Answer 1

selectDaysRange(days) {
      this.selected = [];
      const endDate = moment(this.now).subtract(days, 'days').format('YYYY-MM-DD');
      this.selected.push(endDate, this.startDate);
},