如何在VueJS中渲染换行符↵？

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

<style>
.content {
  white-space: pre-line;
}
</style>

<script>
export default {
  data() {
    return {
      text: "这是第一行\n这是第二行\n这是第三行"
    };
  }
};
</script>

<template>
  <div v-html="formattedText"></div>
</template>

<script>
export default {
  data() {
    return {
      text: "这是第一行\n这是第二行\n这是第三行"
    };
  },
  computed: {
    formattedText() {
      return this.text.replace(/\n/g, "<br>");
    }
  }
};
</script>