JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <div>
    <label for="rot">rot</label>
    <input name="rot" v-model="rot" placeholder="rot" type="number" />
  </div>
  <label for="in">in</label>
  <div>
    <textarea name="in" v-model="input" placeholder="in"></textarea>
  </div>
  <label for="out">out</label>
  <div>
    <textarea name="out" disabled v-model="output" placeholder="out"></textarea>
  </div>
</div>

CSS

textarea {
  min-width: 500px;
  min-height: 100px;
}

JavaScript

const app = new Vue({
  el: '#app',
  data: {
    rot: '1',
    input: ''
  },
  computed: {
    output() {
      return this.input
        .split('')
        .map(l => String.fromCharCode((l.charCodeAt(0) + parseInt(this.rot, 10)) % 256))
        .join('');
    }
  }
});