Владислав Чистяков

const createTopic = () => ({
  text: '',
  subtopics: [ createSubTopic() ],
});

const createSubTopic = () => ({
  text: '',
});

const topics = reactive([ createTopic() ]);

<div v-for="(topic, iTopic) in topics">
  <div>
    <div>
      Topic #{{ iTopic + 1 }}:
      <input v-model="topic.text">
    </div>
    <div v-for="(subtopic, iSubtopic) in topic.subtopics">
      Subtopic #{{ iTopic + 1 }}.{{ iSubtopic + 1 }}:
      <input v-model="subtopic.text">
      <button v-if="iSubtopic" @click="topic.subtopics.splice(iSubtopic, 1)">x</button>
    </div>
  </div>
  <button @click="topic.subtopics.push(createSubTopic())">Add subtopic</button>
</div>
<button @click="topics.push(createTopic())">Add topic</button>