Disable props injection in template

[samturrell]

Hi there,

Is it possible to disable props being automagically injected into the template, and instead enforce props to be accessed via the props object defined in <script setup>?

For example:

<template>
    <h1>{{ title }}</h1> // Not clear where `title` came from
    <h1>{{ props.title }}</h1> // Clear that `title` is a prop
</template>

<script setup>
    const props = defineProps({
        title: {
            type: String,
            required: true,
        },
    });

    // Not recommended but somebody could create a new variable called `title` 
    // which would accidentally override the prop value referenced in the template
    const title = computed(() => {
        return 'Some other value';
    });
</script>

This is also a point of consistency in a project where developers will use each method interchangeably even within the same component.

[samturrell]

Looks like there's a suggestion for a linter rule to cover this: vuejs/eslint-plugin-vue#2172

However would be great to get it as an SFC compiler option