Vue JS - Update data value while processing zip file

Question

I think I am missing something with Vue JS reactivity here.

My problem is that some data values are not updating while I am unzipping a file using File System and Adm-Zip.

Here is some pseudo code to show my issue.

export default {
    data () {
        return {
            unzipped: 0,
            total: 0
        }
    },
    methods: {
        unzipFile (fileName) {
            var that = this

            let r = fs.createReadStream(fileName)
            let w = fs.createWriteStream('archive.zip')

            let i = 0

            r.pipe(w).on('close', function () {

                    var zip = new AdmZip('archive.zip')
                    var zipEntries = zip.getEntries()

                    that.total = zipEntries.length // not updating

                    zipEntries.forEach(function (zipEntry) {
                        zip.extractEntryTo(zipEntry.entryName, dir + 'video', false, true)
                        i++
                        that.unzipped = i // not updating
                    })

            })
            // updates are made here
        }
    }
}

that.total and that.unzipped are not updating while the code executes.

Here is the template code where I show the progress.

<template>
    <div>
        {{ unzipped }}/{{ total }}
    </div>
</template>        

Any help appreciated.

Edit Here is a tested method where the data properties are updated successfully.

testUpdate () {
    var that = this
    that.total = 100
    setInterval(() => {
        that.unzipped++
    }, 1000)
}