Rule proposal: no-ref-emit

[mattjcj]

Hello, first of all thanks for everything provided so far 😃

Please describe what the rule should do:

Reports when trying to emit a ref itself, instead of emitting the value of the ref.

What category should the rule belong to?

• Enforces code style (layout)
• Warns about a potential error (problem)
• Suggests an alternate way of doing something (suggestion)
• Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

Example 1

<template>
    <button @click="increment">Increment</button>
</template>

<script setup>
import { ref } from vue

const emit = defineEmits(['incremented'])

const counter = ref(0)

function increment() {
    counter.value++
    /* Probably an error, trying to emit a ref instead of it's value. */
    emit('incremented', counter) /* ✗ BAD */
    emit('incremented', counter.value) /* ✓ GOOD */
}
</script>

Example 2

<template>
    <button @click="counterA++">Increment A</button>
    <button @click="counterB++">Increment B</button>
</template>

<script setup>
import { ref, computed, watch } from vue

const emit = defineEmits(['updated'])

const counterA = ref(0)
const counterB = ref(0)

const result = computed(() => ({
    a: counterA.value,
    b: counterB.value,
}))

watch(result, () => {
    /*
    Probably an error, trying to emit a ref instead of it's value.
    Additionally, the parent might try to mutate the emitted value in this case where
    it should be a plain object but is instead a computed ref.
    Ideally we would use the argument provided by the watcher in this specific case though.
    */
    emit('updated', result) /* ✗ BAD */
    emit('updated', result.value) /* ✓ GOOD */
})
</script>

Additional context

I couldn't think of any usecase that's not against Vue recommendations where emitting the ref itself would be justified, but
if there is any feel free to discard this rule proposal.

Maybe this functionality can be added to no-ref-as-operand instead of creating a new rule as it is quite similar ?

[FloEdelmann]

Sounds good! I agree that adding that check to vue/no-ref-as-operand is probably a good idea. @ota-meshi what do you think?

[ota-meshi]

Hmm. Personally, I would be happy to include that check in vue/no-ref-as-operand, but since the vue/no-ref-as-operand rule is in the essentials category, it might be better to implement it as a separate rule or vue/no-ref-as-operand rule option. Some users might consider it a matter of preference.

[FloEdelmann]

I'd say let's implement it in vue/no-ref-as-operand without an option then, and add a rule option later if someone complains.