[Vuejs]-Vue3 Composition API with Typescript Default Values for nested objects not working as expected

Have you ever tried withDefaults macro to define props with the default value

export interface Props {
  msg?: string
  labels?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})

I do not think it is possible to do such a thing with the use of default. Although you can create a default object then with the use of the Object.assign() method create a new object with default values, which will be overwritten by the prop you will receive.

const deafult = { kitchen: { windows: 5, }, rooms: 5 };

const recive = {rooms: 3}; //a prop

const mergedValues = Object.assign(deafult, recive);

console.log(mergedValues)

Here is how to use withDefaults with a default object:

interface CustomStyles {
  padding: string
  margin: string
}
interface Props {
  message: string
  styles: CustomStyles
}

const props = withDefaults(defineProps<Props>(), {
  message: "test",
  customStyles: () => ({ 
    padding: "5px",
    margin: "4px"
  }) // notice the round brackets around the object
})