設定したはずのプロパティーやカスタムエレメントが反映されない

Question

前提・実現したいこと

Djangoでwebアプリを作成しており、template内でVue.jsを使用しています。
用意したデータに応じたアイコンの表示をしたいのですが上手くいきません。

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

vue.js:634 [Vue warn]: Property or method "eval" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. 

vue.js:634 [Vue warn]: Unknown custom element: <star-icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)

上記のエラーが５つずつでます。

該当のソースコード

<div id="stars" data-eval="{{ evaluation }}">
    <ul style="list-style: none;">
        <li class="d-inline-block">
            <star-icon :eval="eval" data-id="1"></star-icon>
            <star-icon :eval="eval" data-id="2"></star-icon>
            <star-icon :eval="eval" data-id="3"></star-icon>
            <star-icon :eval="eval" data-id="4"></star-icon>
            <star-icon :eval="eval" data-id="5"></star-icon>
        </li>
    </ul>
</div>

var starIcon = {
    props: ["eval"],
    delimiters: ['[[', ']]'],
    data: function () {
        return {
            right: false,
            star_id: 0,
        }
    },
    mounted: function () {
        var elm = this.$el;
        var id = elm.getAttribute('data-id');
        this.star_id = Number(id);
    },
    template: '<i :class="star"></i>',
    computed: {
        star: function () {
            if (this.star_id <= this.eval) {
                this.right = true;
            } else {
                this.right = false;
            };
            return {
                fas: this.right,
                far: !this.right,
                'fa-star': true,
                'fa-yellow': true,
                'fa-2x': true
            };
        }
    },
}

new Vue({
    el: '#stars',
    delimiters: ['[[', ']]'],
    components: {
        'star-icon': starIcon,
    },
    data: {
        eval: 3,
    },
    beforeMount: function () {
        var elm = this.$el;
        var evaluation = elm.getAttribute('data-eval');
        this.eval = Number(evaluation);
        console.log(this.eval);
    },
})

試したこと

beforeMountをmountedにしてみましたが上手くいきませんでした。

該当のソースコードの最後の行のconsole.log(this.eval)には、2という正しい数値が表示されたので、この部分は上手くいっているようです。

必要であれば他の部分のソースコードも載せます。
よろしくお願いします。

Answer 1

原因は分かりませんが、scriptのインポートする順番を変更したら表示は上手くいきました。
相変わらずエラーは出ていますが、、、