How to change vue data from outside?

Question

I have a function outside of export default object. How can I make Stop button to change into play button after 1 second?

In Short: I want to change playingStatus into false out of scope.

---

Please check {N} PlayGround link for question

---

<template>
    <Page>
        <ActionBar title="Home" />
        <ScrollView>
            <StackLayout>
                <Image v-show="!playingStatus" @tap="startFunc"
                    src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/play_alt-512.png"
                    stretch="aspectFit" />
                <Image v-show="playingStatus"
                    src="https://cdn3.iconfinder.com/data/icons/eightyshades/512/24_Stop-512.png"
                    stretch="aspectFit" />
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
    function playForAWhile() {
        setTimeout(stop, 1000);
    }

    function stop() {
        playingStatus =
        false; // scope error... How to change vue data from outside?
    }

    export default {
        data() {
            return {
                playingStatus: false
            };
        },
        methods: {
            startFunc() {
                this.playingStatus = true;
                playForAWhile();
            }
        }
    };
</script>

<style scoped>
</style>

Or instead of changing variable from outside, how can I toggle images without vue object. Thanks in advance.