Vue warn with sync modifier

[misa-lili]

Hello ✋
I use Vue 2, Vuetify, vue-property-decorator.

When I use prop with sync modifier, like this

export default storyFactory({
  title: 'Utils/DateSelector',
  component: DateSelector,
  args: {
    rangeType: RangeTypeEnum.ALL_TIME,
    start: '2020-01-01',
    end: '2021-12-31',
    exceptedDates: []
  }
})

const Template = (args, { argTypes }) => ({
  components: { DateSelector },
  props: Object.keys(argTypes),
  template: `
    <date-selector 
        :range-type.sync="rangeType"
        :start.sync="start"
        :end.sync="end"
        :excepted-dates.sync="exceptedDates"
        v-bind="$props" 
    />`
})

export const Default = Template.bind({})
Default.args = {
  allowExceptions: true
}

I get this errors.

[Vue warn]: 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. Prop being mutated: "exceptedDates"

Is there any solution to use sync modifier?

[misa-lili]

I solved the problem like this.

import { storyFactory } from "~storybook/util/helpers"
import { RangeTypeEnum } from "@/store/widgetModule"
import DateSelector from './DateSelector.vue'
import vuetify from "@/plugins/vuetify"

export default storyFactory({
  title: 'Utils/DateSelector',
  component: DateSelector,
  args: { } // delete sync props
})

const Template = (args, { argTypes }) => ({
  vuetify, // add for vuetify
  components: { DateSelector },
  props: Object.keys(argTypes),
  data: () => ({
    rangeType: RangeTypeEnum.CUSTOM_DATE,
    start: "2021-02-01",
    end: "2021-02-28",
    exceptedDates: ["2021-02-07", "2021-02-14", "2021-02-21", "2021-02-28"]
  }), // solution
  template: `
    <date-selector 
        :range-type.sync="rangeType"
        :start.sync="start"
        :end.sync="end"
        :excepted-dates.sync="exceptedDates"
        v-bind="$props" 
    />`
})

export const Default = Template.bind({})

export const allowExceptions = Template.bind({})
allowExceptions.args = {
  allowExceptions: true,
}

I just added a data arg to Template.