Vue-class-component + typescript + 単一ファイルコンポーネントに関するthis挙動の質問

日本語
#1

初めまして。よろしくお願いいたします。

質問

件名の構成で、class内のconstructorで自身のメソッド呼び出しにより自身のメンバを設定したいのですが、this.メンバがundefinedになってしまい動作しません。
コードが間違っているのか、そもそもできないのか、ご教示いただければ幸いです。

単一ファイルコンポーネントのコード：

<template>  
    <div id="mapSelector">
        {{ strcopy }}
    </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

@Component({
  props: {
    propinfos: Array
  }
})
export default class MapSelector extends Vue {
  propinfos: string[]
  infos = this.propinfos;
  str: string;
  strcopy: string;
  constructor() {
    super();
    this.str = "hello";
    copystr();
  }
  copystr() {
    this.strcopy = this.str;
  }
}
</script>

<style scoped>
</style>

サブ質問

上記の単一ファイルコンポーネントをjsFiddle上で動かしたいのですが、恥ずかしながらやり方が分かりませんでした。こちらもご教示いただけると助かります。

#2

単一コンポーネントファイルはcodesandbox使うといいと思いますよ。

あと、vue-class-component 使う場合、constructorはvueのライフサイクルメソッドとの兼ね合いで使わない方が良かったような(ふだん使わないので記憶があいまいです)。
createdやmountedで初期化するのではダメでしょうか？

#3

ご回答いただき、誠にありがとうございます。

codesandboxにて再現および修正ができました。

修正はライフサイクルメソッド(created)の利用で、期待する動作が十分可能であるためそちらを使うようにいたします。

また、確かにconstructorの使用については以下のissueで話が出ていました。

修正方針等ご示唆いただき、誠にありがとうございました。大変助かりました。