Base64 encoding failure

This fiddle is to recreate an issue where properly encoded UTF8 code points are restored, making base64 encoding fail.

HTML

<div id="app">
  <h2>1. Data with code points:</h2>
  <blockquote class="encoded" v-html="codePoints"></blockquote>
  
  <hr />
  
  <h2>2. Data as text (showing that we have, in fact, encoded data)</h2>
  <blockquote class="plaintext">{{ codePoints }}</blockquote>
  
  <hr />
  
  <button @click="makeBase64">Click me to trigger error</button>
</div>

CSS

body {
  padding: 15px;
}

h2 {
  font-weight: bold;
  padding: 0 0 16px;
}

hr {
  display: block;
  height: 1px;
  margin: 16px 0;
  background: #000;
}

blockquote {
  padding: 16px;
  background: #eee;
}

button {
  padding: 16px;
  font-weight: bold;
  text-transform: uppercase;
}

Vue

new Vue({
  el: "#app",
  data: {
  	// Set up a string with non-latin characters.
		// "october" in Russian.
  	str: "октября"
  },
	computed: {
  	// Perform the conversion into code points.
  	codePoints () {
      let ret = ''
      for (let i = 0; i < this.str.length; i++) {
        ret += '&#' + this.str[i].charCodeAt() + ';'
      }
      return ret
    }
  },
  methods: {
  	makeBase64 () {
	    // "data" will have the code points restored to their natural values...
    	let data = this.$el.querySelector('blockquote.encoded').innerHTML
      
      // ... which will crash the encoding.
      try {
	      console.log(btoa(data))
      } catch(e) {
      	alert(e.message)
      }
    }
  }
})