テンプレートを用いたマスタッシュ構文での動的なデータの表示ができません。

前提・実現したいこと

WWⅡのドイツの暗号機エニグマを作っています。
methodsの式によって暗号化されたテキストをdataの値に代入してそれを表示したいです。

エニグマ
https://ja.wikipedia.org/wiki/%E3%82%A8%E3%83%8B%E3%82%B0%E3%83%9E_(%E6%9A%97%E5%8F%B7%E6%A9%9F)

発生している問題・エラーメッセージ

エラーメッセージはありません。
テンプレートを用いたマスタッシュ構文での計算結果の表示ができません。
あらかじめdataの中に表示内容を入れておくと表示されます。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <link rel="stylesheet" href="main.css">
6        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
8        <title>エニグマ</title>
9    </head>
10    <body>
11        <header>
12            <h1>ENIGMA</h1>
13        </header>
14        <div id="container">
15            <div id="text-container">
16                <textarea v-model="plainText" cols="30" rows="10"></textarea>                
17            </div>
18            <div id="btn-container" class="mt-3 mb-5">
19                <button v-on:click="encrypter()" class="btn btn-primary">Encrypt</button>
20                <button v-on:click="decrypter()" class="btn btn-secondary">Decrypt</button>
21            </div>
22            <div id="convertedSentenceField">
23                <!-- {{ template1 }} -->
24                <converted-sentence></converted-sentence>
25                <!-- <div v-text="encryption"></div>
26                <div v-text="decryption"></div> -->
27            </div>
28        </div>
29    
30    <script src="enigma.js"></script>
31    </body>
32</html>

該当のソースコード

JavaScript
1const alphabets = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
2
3let initialState = ()  => {	
4    return {      
5        scrambler1: [16, 11, 22, 20, 10, 14, 9, 13, 7, 23, 1, 8, 4, 15, 24, 21, 6, 0, 19, 3, 5, 17, 12, 2, 18, 25],
6        scrambler2: [14, 0, 1, 13, 25, 7, 19, 2, 16, 3, 24, 10, 6, 23, 17, 20, 4, 5, 11, 12, 22, 21, 18, 9, 8, 15],
7        scrambler3: [24, 13, 8, 5, 7, 9, 23, 11, 21, 15, 3, 14, 17, 16, 25, 6, 20, 12, 18, 1, 22, 19, 0, 4, 10, 2],
8        plainText: '',
9        rotationCounter1: 0,
10        rotationCounter2: 0,
11        rotationCounter3: 0,
12        route1: '',
13        route2: '',
14        route3: '',
15        route4: '',
16        reflectedRoute1: '',
17        reflectedRoute2: '',
18        reflectedRoute3: '',
19        reflectedRoute4: '',        
20        encryptedLetter: '',
21        encryptedText: [],
22        decryptedLetter: '',
23        decryptedText: [],
24        encryption: '',
25        decryption: '',        
26    }      
27}
28
29let rotator = (scrmbr) => {
30    let rotation = scrmbr.shift()
31    scrmbr.push(rotation)                    
32}
33
34const EncryptedSentence = {
35    template: `<div v-show="this.encryption">{{ this.encryption }}</div>`,
36};
37  
38const DecryptedSentence = {
39    template: `<div v-if="this.decryption">{{ decrypter() }}</div>`,
40};
41
42const ConvertedSentence = {
43    components: {
44      'encrypted-sentence': EncryptedSentence,
45      'decrypted-sentence': DecryptedSentence,
46    },
47    template: `
48      <div>
49        <encrypted-sentence></encrypted-sentence>
50        <decrypted-sentence></decrypted-sentence>
51      </div>
52    `,
53};
54
55new Vue({
56    el: '#container',
57    components: {
58        'converted-sentence': ConvertedSentence,
59    },
60    data() {
61        return initialState()        
62    },
63    
64    methods: {
65        reset() {	
66            Object.keys(this.$data).forEach(key => delete this.$data[key])          
67            Object.assign(this.$data, initialState());          
68        },
69
70        encrypter() {            
71            let temp = this.plainText.split('')//a      
72            this.reset()        
73                        
74            for(let i = 0; i < temp.length; i++) {
75                let router = () => {
76                    this.route1 = alphabets.indexOf(temp[i])//0
77                    this.route2 = this.scrambler1[this.route1]//16
78                    this.route3 = this.scrambler2[this.route2]//4
79                    this.route4 = this.scrambler3[this.route3]//7
80                    this.encryptedLetter = alphabets[this.route4]
81                    this.encryptedText.push(this.encryptedLetter)
82                }                
83                
84                if(this.rotationCounter1 < 26
85                && this.rotationCounter2 === 0
86                && this.rotationCounter3 === 0) {
87                    router()
88                    rotator(this.scrambler1)
89                    this.rotationCounter1++
90                    
91                } else if(this.rotationCounter1 === 26
92                       && this.rotationCounter2 === 0
93                       && this.rotationCounter3 === 0) {
94                    rotator(this.scrambler2)
95                    router()
96                    this.rotationCounter1 = 0
97                    this.rotationCounter2++
98                    
99                } else if(this.rotationCounter1 === 0
100                       && this.rotationCounter2 < 26
101                       && this.rotationCounter3 === 0) {
102                    rotator(this.scrambler2)
103                    router()
104                    this.rotationCounter2++
105                    
106                } else if(this.rotationCounter1 === 0
107                       && this.rotationCounter2 === 26
108                       && this.rotationCounter3 === 0) {
109                    rotator(this.scrambler3)
110                    router()
111                    this.rotationCounter2 = 0
112                    this.rotationCounter3++
113                    
114                } else if(this.rotationCounter1 === 0
115                       && this.rotationCounter2 === 0
116                       && this.rotationCounter3 < 26) {
117                    rotator(this.scrambler3)
118                    router()
119                    this.rotationCounter3++
120                    
121                } else if(this.rotationCounter1 === 0
122                       && this.rotationCounter2 === 0
123                       && this.rotationCounter3 === 26) {
124                    rotator(this.scrambler1)
125                    router()
126                    this.rotationCounter3 = 0
127                    this.rotationCounter1++
128                }
129            }
130            console.log(this.encryptedText)     
131            this.encryption = this.encryptedText.join('')       
132            console.log(this.encryption)
133            //return this.encryption 
134        },
135
136        （省略）
137})