Why props default is not working when I'm trying to use a default title when no props are passed?

Question

I want to show the default title "Introduction Props" in the

tag when no props are provided. but I'm getting "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'title')" error.

<p>{{ section.title }}</p>

export default {
  props: {
    section: Object,
    default: {
      type: "section",
      title: "Introduction Props",
      desc: "",
      children: [
        {
          type: "lecture",
          title: "Introduction",
        },
      ],
    }
  },
};

Answer 1

you have to rearrange your props:

export default {
  props: {
    section: {
      type: Object,
      default: () => {
        type: "section",
        title: "Introduction Props",
        desc: "",
        children: [
          {
            type: "lecture",
            title: "Introduction",
          }
        ]
      }
    },
};