<template>
  <div>
    <h2>Prop List</h2>
    <ul>
      <li id="inject">{{val1}}</li>
      <li id="useInjectedProp">{{val2}}</li>
      <li id="usePropThenInjected">{{val3}}</li>
    </ul>
  </div>
</template>

<script setup>
import { useInjectedProp, usePropThenInjected } from "@/composables/useInjections";
import {inject, computed} from "vue";

const props = defineProps({
    prop1: {
      type: String, required: false, default: undefined
    },
  })

  const val1 = inject('injected1', computed(() => props.prop1))
  const val2 = useInjectedProp('injected1', props, 'prop1', 'v2def')
  const val3 = usePropThenInjected('injected1', props, 'prop1', 'v3def')
</script>

