weweb-simple-component.vue

<!-- This is a Vue.js single file component. -->
<!-- https://vuejs.org/v2/guide/ -->

<!-- Your HTML -->
<template>
    <div class="hello">
        <!-- This object will be editable in the Editor -->
        <wwObject v-bind:ww-object="section.data.helloWorld"></wwObject>
        
        <!-- This one is as you are used to -->
        <div>{{contentFromWeatherAPI}}</div>
    </div>
</template>

<!-- Your Javascript ❤️ -->
<script>
export default {
    name: "HelloWorld",
    data() {
        return {
            contentFromWeatherAPI: 'Fetching data ...'
        }
    },
    methods: {
        // Connect any External API
        async fetchWeather() {
            try {
                const response = await axios.get('https://my-weather-api.com/get');
                this.contentFromWeatherAPI = response.data;
            } 
            catch(error) { console.log(error); }
        }
    },
    created(){
        this.fetchWeather();
    }
};
</script>

<!-- Your CSS -->
<style lang="scss" scoped>
.hello {
    padding: 100px 50px;
    color: green;
}
</style>