課題

propsの文字列に<br>を含ませ、v-htmlで表示すれば解決するのは分かっていたが、XSSの危険性があるので使いたくなかった
propsの文字列に改行コード\nを含ませ、white-space: pre-wrapで改行させる方法も考えたが、半角スペースが入ってしてしまいデザインが崩れて困った

解決方法

window.innerWidthが768px以下になったとき、改行コードをreplaceする処理を子コンポーネントに入れた。

ChildComponent.vue

<template>
  <div class="text">{{ displayText }}</div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'

type Props = {
  text: string
}
const props = withDefaults(defineProps<Props>(), {
  text: ''
})
const displayText = ref('')

const handleResize = async () => {
  if (window.innerWidth >= 768) {
    displayText.value = props.text.replace('\n', '')
  } else {
    displayText.value = props.text
  }
}

onMounted(async () => {
  handleResize()
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})

watch(
  () => props.text,
  () => {
    handleResize()
  }
)
</script>

<style scoped lang="scss">
.text {
  white-space: pre-wrap;
}
</style>

所感

改行させたいだけなのになんだか複雑になってしまった😥
けっこう頻発しそうな問題な気がしますが、みなさまどうやって解決しているのでしょう。
なにかもっと良い方法がありましたら教えてほしいです。