Why does the value placed in data not work in the template, but only props?

Question

Vue.js

Instead of a thousand words: https://jsfiddle.net/tagdjyrL/
The essence of the problem is as follows. I accept props with the name "aa" and here, based on its value, either I display a modal window or not:
<div class="modal" :class="{'is-active': aa}" >
I can't understand why if I write:

<div class="modal" :class="{'is-active': isActive}" >

Everything stops working. `isActive` is the same element in data which I also need to be able to check for a value. Why does only checking against the value accepted in `props` work?
What is the problem?

Answer 1

Everything is working. "Doesn't work" and "doesn't work as I expect" are not the same thing.
Assigning a property value based on a parameter is done once - in data, when the component is instantiated. So if you want to use the property in the template, you will have to update it manually - hang watch on the parameter.