Rule Proposal: vue/no-props-shadow

[jaredmcateer]

Please describe what the rule should do: This is similar to #2172 but I would like to allow the use of implicit props and would like to warn/error when a variable shadowing a prop is defined.

<script setup lang="ts">
import {computed} from 'vue';

const props = defineProps<{ isDisabled: boolean }>();

// Creating variables with the same name as props 
// creates an ambiguity in the template
const isDisabled = computed(() => props.isDisabled ? 'yes' : 'no'));
</script>

<template>
  <!-- Is this `isDisabled.value` or `props.isDisabled` ? -->
  <h1>Disabled: {{ isDisabled }}</h1>
</template>

What category should the rule belong to?

• [ ] Enforces code style (layout)
• [X] 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:

<script setup lang="ts">
import {ref} from 'vue';
const props = defineProps<{foo: boolean}>();

// BAD
const foo = ref(false);
</script>

<script setup lang="ts">
import {computed} from 'vue';
const props = defineProps<{foo: boolean}>();

// BAD
const foo = computed(() => {
  return props.foo ? 'yes' : 'no';
});
</script>

<script setup lang="ts">
defineProps<{ foo: 'yes' | 'no' }>();

// BAD
const foo = false;
</script>

Additional context It might be worthwhile to abstract #2172 and this proposal into a rule that can support either with options as they do seem fairly closely related.

[FloEdelmann]

I like your suggestion, but I think this should be a separate rule. vue/no-props-shadow sounds good! PR welcome :slightly_smiling_face: