How to preserve formatting in a multiline <v-text-field>? - vuetify.js

Question

I use v-text-field to gather a lengthy description from the user.
This description has line breaks but when looking at the Vue data element which holds the description I see that it is a string with just the content - the separators are gone.
Is there a way to keep the new lines in the Vue data element?

Answer 1

The formatting is actually present, it is just not visible when analyzing the value (string) of the bound property.
An example of reuse of a textarea content is below. Type a few lines in the first placeholder and the content will be manipulated in several ways, with formatting preserved
new Vue({
el: "#app",
data: {
comment: 'placeholder'
},
computed: {
jcomment() {
return JSON.stringify(this.comment)
},
bcomment() {
return JSON.parse(this.jcomment)
}
}
})
p {
background-color: lightgray;
padding: 5px 5px 5px 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
<div id="app">
<p>the textarea to type into</p>
<v-text-field multi-line v-model="comment"></v-text-field>
<p>a dynamic copy of the textarea above</p>
<v-text-field multi-line v-model="comment"></v-text-field>
<p>a "pre" version of the content</p>
<pre>{{comment}}</pre>
<p>a JSON version of the content</p>
{{jcomment}}
<p>the JSON version above, parsed and displayed in a textarea</p>
<v-text-field multi-line v-model="bcomment"></v-text-field>
</div>