Default props in Vue 3 composition api are undefined (TS)

Question

If I don't pass a value, the prop is just undefined, instead of taking the default value.

For example switchView and activeView. I have defined the props like this:

interface Props {
  config: {
    switchView?: boolean;
    activeView?: number;
    urls: {
      someUrl: string;
    };
    labels?: {
      someLabels: string;
    };
  };
}

const props = withDefaults(defineProps<Props>(), {
  config: () => ({
    switchView: true,
    activeView: 0,
    urls: {
      someUrl: '',
    },
    labels: {
      someLabel: '',
    },
  }),
});

And in the parent component, I'm passing the prop config object like so:

const config = {
  urls: {
    someUrl: '/example',
  },
  labels: {
    someLabel: 'Example label',
  },
};

And in my Vue Dev Tools I only see the passed props, but none of the default values that I've set. What am I doing wrong?

If I pass them in the config object, I get them as a prop. But I expect if I don't pass those optional values, then the defaults will take place.

Answer 1

I found the issue. Vue has a problem with nested props, more specifically, the parent config object is the problem. By removing it it works fine.

interface Props {
  switchView?: boolean;
  activeView?: number;
  urls: {
    someUrl: string;
  };
  labels?: {
    someLabel: string;
  };
}

const props = withDefaults(defineProps<Props>(), {
  switchView: true,
  activeView: 0,
  urls: () => ({
    someUrl: '',
  }),
  labels: () => ({
    someLabel: '',
  }),
});