<script setup> vue/no-mutating-props - Unexpected mutation of "isExpanded" prop

[soerenmartius]

Checklist

• I have tried restarting my IDE and the issue persists.
• I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: 7.32.0
• eslint-plugin-vue version: 8.0.3
• Node version: 14.17.2
• Operating System: Darwin / MacOS

What did you do?

<script setup lang="ts">
import { defineEmits, defineProps, ref, watch, withDefaults } from 'vue'

import { FormEvents } from './types'

const emit = defineEmits<{
  (e: FormEvents.TOGGLED, isExpanded: boolean): void
}>()

interface Props {
  isExpanded?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  isExpanded: false,
})

const isExpanded = ref(props.isExpanded)

watch(
  () => props.isExpanded,
  () => {
    isExpanded.value = props.isExpanded
  },
)

watch(isExpanded, () => emit(FormEvents.TOGGLED, isExpanded.value))
</script>

What did you expect to happen?

As isExpanded is redefined as a ref, eslint should pass. Instead it detects an error:

What actually happened?

Eslint should pass since the prop doesn't get mutate directly.

[ota-meshi]

I can't reproduce your problem. Please provide a repository to reproduce the problem.

[soerenmartius]

I can't reproduce your problem. Please provide a repository to reproduce the problem.

Hey @ota-meshi , thanks for coming back to me!

Of course, I just uploaded an example to reproduce the error here: https://github.com/soerenmartius/vitesse/blob/soerenmartius/eslint-test/src/pages/index.vue

[ota-meshi]

I was able to reproduce the issue.
Need a template block to reproduce issue.

<template>
  <input v-model="isExpanded">
</template>

<script setup lang="ts">
import { defineEmits, defineProps, ref, watch, withDefaults } from 'vue'

import { FormEvents } from './types'

const emit = defineEmits<{
  (e: FormEvents.TOGGLED, isExpanded: boolean): void
}>()

interface Props {
  isExpanded?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  isExpanded: false,
})

const isExpanded = ref(props.isExpanded)

watch(
  () => props.isExpanded,
  () => {
    isExpanded.value = props.isExpanded
  },
)

watch(isExpanded, () => emit(FormEvents.TOGGLED, isExpanded.value))
</script>

Demo