Vue writes that the method is undefined, although it is not. Where is the mistake?

Question

Vue.js

I'm trying to file a clock on the page, but Vui swears. Vod code:

<el-col :span="8">
        <div class="grid-content">
          <div id="clock">
            <ul>
              <li class="date"><p class="clockdate">{{ date }}</p><p class="clockday">{{ day }}</p></li>
              <li class="time">{{ time }}</li>
            </ul>
          </div>
        </div>
      </el-col>

//////////////////////////// data & time
var clock = new Vue({
    el: '#clock',
    data: {
        time: '',
        date: '',
        day: ''
    }
});

//var week = ['ВС', 'ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ'];
var week = ['ВОСКРЕСЕНЬЕ', 'ПОНЕДЕЛЬНИК', 'ВТОРНИК', 'СРЕДА', 'ЧЕТВЕРГ', 'ПЯТНИЦА', 'СУББОТА'];
var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() {
    var cd = new Date();
    clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
    clock.date = zeroPadding(cd.getDate(), 2) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getFullYear(), 4);
    clock.day = week[cd.getDay()];
};

function zeroPadding(num, digit) {
    var zero = '';
    for(var i = 0; i < digit; i++) {
        zero += '0';
    }
    return (zero + num).slice(-digit);
}

Here is what it gives in errors:

vue.js:597 [Vue warn]: Property or method "date" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)
warn @ vue.js:597
warnNonPresent @ vue.js:1901
has @ vue.js:1934
(anonymous) @ VM18796:3
Vue._render @ vue.js:4535
updateComponent @ vue.js:2788
get @ vue.js:3140
Watcher @ vue.js:3129
mountComponent @ vue.js:2795
Vue.$mount @ vue.js:8527
Vue.$mount @ vue.js:10926
(anonymous) @ mainscript.js:6
vue.js:597 [Vue warn]: Property or method "day" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)
warn @ vue.js:597
warnNonPresent @ vue.js:1901
has @ vue.js:1934
(anonymous) @ VM18796:3
Vue._render @ vue.js:4535
updateComponent @ vue.js:2788
get @ vue.js:3140
Watcher @ vue.js:3129
mountComponent @ vue.js:2795
Vue.$mount @ vue.js:8527
Vue.$mount @ vue.js:10926
(anonymous) @ mainscript.js:6
vue.js:597 [Vue warn]: Property or method "time" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)
warn @ vue.js:597
warnNonPresent @ vue.js:1901
has @ vue.js:1934
(anonymous) @ VM18796:3
Vue._render @ vue.js:4535
updateComponent @ vue.js:2788
get @ vue.js:3140
Watcher @ vue.js:3129
mountComponent @ vue.js:2795
Vue.$mount @ vue.js:8527
Vue.$mount @ vue.js:10926
(anonymous) @ mainscript.js:6
backend.js:1  vue-devtools  Detected Vue v2.5.17

Answer 1

Well, first of all, it's not a method, but a property.
And secondly - still so, undefined. You mount the second Vue instance inside the first one. Why would you need this - I personally don’t have enough imagination to imagine. The first instance, when compiled, of course, processes that part of the template that, in your opinion, is intended for the second. Hence the errors - the first instance does not have the properties that the second one has and which are used in the template.
What to do? Well, the first option is obvious - get rid of the second Vue instance, transfer its data to the first one, or make a separate component - that's up to you. The second one is if you really need blood from your nose so that there are two instances and one is mounted inside the other - use v-pre(It is dangerous if the update of the external instance affects the element to which the internal instance is mounted - the internal instance will fall off).