The problem with replacing a new line with a new line with a space, how to solve?

Question

JavaScript

There is such a small script for replacing the input of a new line with a new line with a space, made using vue

new Vue ({
  el: '#app',
  data: {
    input: '',
  },
    methods: {
    onInput() {
      this.input = this.input.split('\n').join('⠀\n');
    }
  }
});

But at work, textarea behaves inappropriately, creates a lot of extra spaces and, in the process of printing and line wrapping, creates new lines. Here's a video

. What's the best way to implement this feature? Make a replacement when you press the Enter button?
Thanks in advance.

Answer 1

Make a replacement when you press the Enter button?

As an option .

Answer 2

https://codepen.io/Int0h/pen/QrLroj
so for example (line 13 in js)