bootstrap-vue carousel slides not updating after adding new image - vue.js

Question

I am trying to use bootstrap-vue b-carousel component adding dynamic images to the carousel does not update the carousel content. Here is my test:
<b-carousel v-model="active" fade :interval="1000" :id="'carousel' + items.length" indicators controls clajss="picture-viewer-carousbel">
<b-carousel-slide v-for="(item,index) in items" :id="'slideId'+index" :key="'slideId'+index" :img-src="item" img-width="100%">
</b-carousel-slide>
</b-carousel>
And here is the code part
export default {
name: 'App',
data: function () {
return {
active: 0,
items: ['https://picsum.photos/1024/480/?image=10']
}
},
mounted () {
this.items.push('https://picsum.photos/1024/480/?image=12')
}
}
I am expecting the carousel to display 2 images but it isn't it only displays one image, even though the reactivity is working correctly because the id of the carousel which takes into account the number of slides is correct (:id="'carousel' + items.length") is 'carousel2'. It would be 'carousel1' if the reactivity would not be working.
Not sure what and if I am doing something wrong but any help is welcome
Thanks
Pat
package.json
{
"name": "bootstrapvue",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/pro-light-svg-icons": "^6.0.0-beta2",
"#fortawesome/pro-regular-svg-icons": "^6.0.0-beta2",
"#fortawesome/pro-solid-svg-icons": "^6.0.0-beta2",
"#fortawesome/vue-fontawesome": "^2.0.2",
"#progress/kendo-data-query": "^1.5.5",
"#progress/kendo-drawing": "^1.14.0",
"#progress/kendo-licensing": "^1.2.0",
"#progress/kendo-theme-bootstrap": "^4.41.2",
"#progress/kendo-vue-animation": "^2.5.0",
"#progress/kendo-vue-data-tools": "^2.5.0",
"#progress/kendo-vue-dateinputs": "^2.5.0",
"#progress/kendo-vue-dropdowns": "^2.5.0",
"#progress/kendo-vue-grid": "^2.5.0",
"#progress/kendo-vue-inputs": "^2.5.0",
"#progress/kendo-vue-intl": "^2.5.0",
"axios": "^0.21.4",
"bootstrap-icons": "^1.5.0",
"core-js": "^3.18.1",
"interactjs": "^1.10.11",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"normalizr": "^3.6.1",
"portal-vue": "^2.1.7",
"sortablejs": "^1.14.0",
"vue": "^2.6.14",
"vue-fontawesome": "0.0.2",
"vue-resizable": "^2.0.5",
"vue-router": "^3.5.2",
"vuedraggable": "^2.24.3",
"vuetify": "^2.5.9",
"vuex": "^3.4.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-unit-jest": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-standard": "^5.1.2",
"#vue/test-utils": "^1.2.2",
"babel-eslint": "^10.1.0",
"bootstrap": "4.5.3",
"bootstrap-vue": "2.21.2",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.42.1",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.14"
}
}