<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>

<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>