Static GitHub Issues

[248] vue + jsx, webpack hot reload issue

prev: i18n example not working as expected
next: Can't get nuxt / vuejs to render store properly in the server.

Hi,

I had the next case today. Here is my module:

<script>
    import Currency from '~components/currency.vue';

    export default {
        props: ['installment'],
        computed: {
            classObject: function () {
                return {
                    'alert-danger': this.installment.status === 'DUE',
                    'alert-success': this.installment.status === 'PAID',
                    'alert-info': this.installment.status === 'PENDING'
                };
            }
        },
        methods: {
            async pay () {
                this.$store.commit('PAY_INSTALLMENT');
                this.$store.commit('SET_STATUS', 'CONFIRMED');
            }
        },
        render(h) {
            return (
                    <div class={{ ...{ 'alert': true, 'col-md-2': true }, ...this.classObject }}>
                        {this.installment.label}
                        <Currency value={this.installment.amount}></Currency>
                        { this.installment.status === 'DUE' ?
                                <input class="btn btn-default" type="button" onClick={this.pay} value="Pay"/> : '' }
                    </div>
            )
        }
    }
</script>

After, I've updated the classObject function. At the browser console it says: image

However, the actual application was not updated. I need to refresh the page. I have no idea if it could be "fixed" somehow, but it would be really nice to have the hot reload for the jsx applications.

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This bug report is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c211">#c211</a>)</em></sub></div>