[Vuejs]-Export default issue with VueJS ES5

You have written completely wrong syntax of JavaScript. What you are trying to do here is to put “export default” in the place where object key should go. I will provide correct code here, but I strongly suggest you go and learn the fundamentals of JavaScript including arrays and objects in order to be able to read and write correct and valid JavaScript. Here is some good learning material for beginners:

• http://eloquentjavascript.net/
• https://maximdenisov.gitbooks.io/you-don-t-know-js/content/

And here is the fixed Vue component:

export default Vue.component("question", {
    props: {
        scenarios: Array,
        scenario: Object,
        post: Boolean
    },
    data: function () {
        return ({
            choice: 0,
            counter: 0,
            finished: false
        });
    },
    methods: {
        onClickButton: function (event) {
            this.$emit("clicked", "someValue");
        },
        postResponse: function () {
            var formData = new FormData();
            formData.append(this.choice);
            // POST /someUrl
            this.$http.post("Study/PostScenarioChoice", formData).then(response => {
                // success callback
            }, response => {
                // error callback
            });
        },
        activatePost: function () {
            if (this.counter < this.scenarios.length) {
                this.counter++;
            }
            else {
                this.finished = true;
            }
        }
    },
    template:
        `<div>
                <div v-if="this.finished === false" class="row justify-content-center">
                    <div class="col-lg-6">
                        <button class="btn btn-light" href="#" v-on:click="this.onClickButton">
                            <img class="img-fluid" v-bind:src="this.scenarios[this.counter].scenarioLeftImg" />
                        </button>
                    </div>
                    <div class="col-lg-6">
                        <button class="btn btn-light" href="#" v-on:click="this.onClickButton">
                            <img class="img-fluid" v-bind:src="this.scenarios[this.counter].scenarioRightImg" />
                        </button>
                    </div>
                </div>
                <finished v-else></finished>
            </div>`
});

The actual answer was a simple misunderstanding of the information presented here. The use of export default was irrelevant in my implementation however this was not easily visible until I started noticing the emit posting the parent element later on.

The actual implementation was as follows:

    var question = Vue.component('question', {
    props: {
        scenarios: Array,
        scenario: Object,
        post: Boolean,
        counter: Number
    },
    data: function () {
        return ({
            choice: 0,
            finished: false
        });
    },
    methods: {
        onClickButton: function (event) {
            this.$emit('clicked', 'someValue');
        },
        postResponse: function () {
            var formData = new FormData();
            formData.append(this.choice);
            // POST /someUrl
            this.$http.post('Study/PostScenarioChoice', formData).then(response => {
                // success callback
            }, response => {
                // error callback
            });
        }
    },
    template:
        `<div>
                <div v-if="this.finished === false" class="row justify-content-center">
                    <div class="col-lg-6">
                        <button class="btn btn-light" href="#" v-on:click="this.onClickButton">
                            <img class="img-fluid" v-bind:src="this.scenarios[this.counter].scenarioLeftImg" />
                        </button>
                    </div>
                    <div class="col-lg-6">
                        <button class="btn btn-light" href="#" v-on:click="this.onClickButton">
                            <img class="img-fluid" v-bind:src="this.scenarios[this.counter].scenarioRightImg" />
                        </button>
                    </div>
                </div>
                <finished v-else></finished>
            </div >`
});

The receiving method in the parent element is as follows:

onClickChild: function (value) {
        console.log(value) // someValue
        this.showTimer = true;
        this.countdownTimer();
        if (this.counter < this.scenarios.length) {
            this.counter++;
        }
        else {
            this.finished = true;
        }
    }