子コンポーネントにpropsで渡した文字列をウィンドウサイズによって改行させたりさせなかったりしたい

課題

• 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>

所感

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