Changing extended Vue component's data upon instantiation

If I have a base component (named Block), which looks similar to this:

<script lang="ts">
import { defineComponent } from 'vue';


export default defineComponent({
  data() {
    return {
      data: "hello",
      comment: null
    }
  }

</script>

<template>
  <h1>{{ data }}</h1>
</template>

And I have another component that extends it (named ToggleBlock), looking like this:

<script lang="ts">
import { defineComponent } from 'vue';
import Block from './Block.vue';


export default defineComponent({
    extends: Block,
    data() {
        return {
            toggled: false,
        }
    }
}
)

</script>
        
<template>
   
    <div>
    <span>
        <h1>{{ data }}</h1>
        <input  type="checkbox" id="checkbox" v-model="toggled"
    </span>
    </div>



</template>

Suppose I have a valid JSON array with blocks_data.new_data="Hello World".How would I change Block's data upon instantiating ToggleBlock in some other template? I am very new to Vue, and this is what I've been trying:

<ToggleBlock :data=blocks_data.new_data></ToggleBlock>

This does not change data's initial value. In order to take JSON out of the equation, I've tried:

<ToggleBlock data=Hello World></ToggleBlock>

But that doesn't seem to work either. I know modifying an extended component's data is likely very simple, but I cannot seem to find what fits my case. Any help is very appreciated!