Please describe what the rule should do:

Props can be referenced in the template using propName or props.propName. Former is convenient; latter is more explicit, provides a clear delineation between local state and props and is consistent with how props are accessed in script. Former could also feel counter-intuitive if you're using Typescript (but that's subjective).

The rule, when enabled, should flag any occurrence of implicit prop access in the template.

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:

 <template>
 <div>
 <!-- bad -->
 <div v-if="myProp">
 myProp: true
 </div>
 <!-- bad -->
 <div>
 myProp: {{ myProp }}
 </div>
 <!-- good -->
 <div v-if="props.myProp">
 myProp: true
 </div>
 <!-- good -->
 <div>
 myProp: {{ props.myProp }}
 </div>
 </div>
 </template>
 <script lang="ts">
 export interface Props {
 myProp: boolean;
 }
 const props = defineProps<Props>();
</script>

Additional context

I tried to look for existing rules and proposals but couldn't find anything on this subject. If this is already possible, please let me know. Thank you.