{% verbatim %}

.

{% verbatim %}
    <div id="EURUSD_input">
        

        <h4>CHF</h4>
        CHFJPY: {{ CHFJPY }} <br>
        USDCHF: {{ USDCHF }} <br>
        GBPCHF: {{ GBPCHF }} <br>
        AUDCHF: {{ AUDCHF }} <br>
        NZDCHF: {{ NZDCHF }} <br>
        CADCHF: {{ CADCHF }} <br>
        <h4>JPY</h4>
        CADJPY: {{ CADJPY }} <br>
        AUDJPY: {{ AUDJPY }} <br>
        NZDJPY: {{ NZDJPY }} <br>
        <h4>GBP</h4>
        GBPAUD: {{ GBPAUD }} <br>
        GBPNZD: {{ GBPNZD }} <br>
        GBPCAD: {{ GBPCAD }} <br>
        <h4>AUD</h4>
        EURAUD: {{ EURAUD }} <br>
        AUDCAD: {{ AUDCAD }} <br>
        AUDNZD: {{ AUDNZD }} <br>
        <h4>CAD</h4>
        USDCAD: {{ USDCAD }} <br>
        NZDCAD: {{ NZDCAD }} <br>
        <h4>NZD</h4>
        EURNZD: {{ EURNZD }} <br>

    </div>
    {% endverbatim %}

<script src="/static/fx_calculations.js"></script>

new Vue ({
    el: '#EURUSD_input',
    data() {
        return {
          USDJPY: document.getElementById('USD/JPY').innerHTML,
          AUDUSD: document.getElementById('USD/AUD').innerHTML,
            ....
          NZDCHF: 0,
            ....
            }
        },
    methods: {
        somefunction(){
            this.USDCHF= (this.EURCHF / this.EURUSD).toFixed(4);
            this.AUDJPY= (this.AUDUSD * this.USDJPY).toFixed(4);
            this.GBPAUD= (this.GBPUSD / this.AUDUSD).toFixed(4);
             ....
        },
    },
    mounted:function(){
        this.somefunction();
    }
});

Set up

.

Static dir, app.js


STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static")
]


{% verbatim %}
{% endverbatim %}


Set id in div 

new Vue ({
    el: '#vue_app'
})

Review

all together

cdn Vue, Bootstrap, Axios

{% verbatim %
<div class=“container” id=“orders_app”>
	<div class “btn bin-success btn-lg” v-for =“order in orders”>
		Description: {{ order.desecription }}
		<br>
		Amount: {{ order.amount }}
	</div>
</div>
{% endverbatim %}


<script scr”/static/app.js”></script>


STATICFILES_DIRS = [
	os.path.join(BASE_DIR, “static”)
]


new Vue ({
	el: “orders_app”,  <= # here!!! 
	data : { 
	orders: []
	},
	created: funciton () {
		const vm = this;
		axios.get(“/api/orders/“)
		.then(function (response){
		vm.orders = response.data
		}
	}
})