VUE3: params used to select which data in composition API to populate the data in a component binded by :post

Question

I am currently working on a view that has a component that relies on bound information. The problem I am having is finding the right syntax to use with :post. I have set up the Composition API, and set a const val = props.id, which is a param I have sent over from the previous page. If I console.log(val), the word is correct, but when I bind, it doesn't perform as if I wrote the word in myself. So if I write <component-foo :post="Notes" />, everything works fine. But if I write <component-foo :post="val" />, where const val = props.id in the Composition API, it fails to load.

Here is the code that I have written:

<template>
  <focused-section :post="val" />
</template>

<script>
import FocusedSection from '@/components/FocusedSection.vue';
 
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'FocusedView',
  components: { FocusedSection },
  props: ['id'],
  setup(props) {
    // eslint-disable-next-line vue/no-setup-props-destructure
    const val = props.id;
    const Notes = {
      title: 'ChiroWrite Notes',
      photo: 'notes-image',
      alt: 'Image of someone taking notes',
      overview: 'ChiroWrite is designed ...',
      features: {
        feature1: 'some info',
        feature2: 'some info',
        feature3: 'some info',
        feature4: 'some info',
        feature5: 'some info',
        feature6: 'some info',
      },
      productPhoto: 'patient-notes',
      ppAlt: 'Example screen of Chirowrite notes.',
    };
 
    const Scheduler = {
      title: 'ChiroWrite Scheduler',
      photo: 'schedule-image',
      alt: 'Graphic representation of a schedule',
      overview: 'The ChiroWrite Scheduler...',
      features: {
        feature1: 'some info',
        feature2: 'some info',
        feature3: 'some info',
        feature4: 'some info',
      },
      productPhoto: 'scheduler-default',
      ppAlt: 'Example image of the scheduler screen.',
    };
 
    const Billing = {
      title: 'ChiroWrite Billing',
      photo: 'billing-image',
      alt: 'Graphic representation of billing',
      overview: 'The ChiroWrite billing...',
      features: {
        feature1: 'some info',
        feature2: 'some info',
        feature3: 'some info',
      },
      productPhoto: 'scheduler-text',
      ppAlt: 'Example image of the billing screen',
    };
 
    return {
      Notes,
      Scheduler,
      Billing,
      val,
    };
  },
};
</script>