diff --git a/src/views/autocomplete/AutoCompleteDoc.vue b/src/views/autocomplete/AutoCompleteDoc.vue
index b6ad9df6e..5a58552a9 100755
--- a/src/views/autocomplete/AutoCompleteDoc.vue
+++ b/src/views/autocomplete/AutoCompleteDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="AutoCompleteDemo" :sources="sources" service="CountryService" data="countries">
+    <AppDoc name="AutoCompleteDemo" :sources="sources" service="CountryService" :data="['countries']">
         <h5>Import</h5>
 <pre v-code.script><code>
 import AutoComplete from 'primevue/autocomplete';
diff --git a/src/views/carousel/CarouselDoc.vue b/src/views/carousel/CarouselDoc.vue
index 3f36a6da1..1cf6ad72b 100755
--- a/src/views/carousel/CarouselDoc.vue
+++ b/src/views/carousel/CarouselDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="CarouselDemo" :sources="sources" service="ProductService" data="products-small">
+	<AppDoc name="CarouselDemo" :sources="sources" service="ProductService" :data="['products-small']">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Carousel from 'primevue/carousel';
diff --git a/src/views/deferredcontent/DeferredContentDoc.vue b/src/views/deferredcontent/DeferredContentDoc.vue
index e5fcc5675..bac7917c2 100755
--- a/src/views/deferredcontent/DeferredContentDoc.vue
+++ b/src/views/deferredcontent/DeferredContentDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="DeferredContentDemo" :sources="sources" service="ProductService" data="products-small">
+	<AppDoc name="DeferredContentDemo" :sources="sources" service="ProductService" :data="['products-small']">
         <h5>Import</h5>
 <pre v-code.script><code>
 import DeferredContent from 'primevue/deferredcontent';
diff --git a/src/views/floatlabel/FloatLabelDemo.vue b/src/views/floatlabel/FloatLabelDemo.vue
index da13d2a9f..3097f9d99 100644
--- a/src/views/floatlabel/FloatLabelDemo.vue
+++ b/src/views/floatlabel/FloatLabelDemo.vue
@@ -107,7 +107,7 @@
             </div>
         </div>
 
-        <AppDoc name="FloatLabelDemo" :sources="sources" service="CountryService" data="countries" />
+        <AppDoc name="FloatLabelDemo" :sources="sources" service="CountryService" :data="['countries']" />
     </div>
 </template>
 
diff --git a/src/views/inplace/InplaceDoc.vue b/src/views/inplace/InplaceDoc.vue
index 7e816e520..2cc859e1f 100755
--- a/src/views/inplace/InplaceDoc.vue
+++ b/src/views/inplace/InplaceDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="InplaceDemo" :sources="sources" service="ProductService" data="products-small" >
+	<AppDoc name="InplaceDemo" :sources="sources" service="ProductService" :data="['products-small']" >
         <h5>Import</h5>
 <pre v-code.script><code>
 import Inplace from 'primevue/inplace';
diff --git a/src/views/invalid/InvalidDemo.vue b/src/views/invalid/InvalidDemo.vue
index 47d7494aa..9480ae363 100644
--- a/src/views/invalid/InvalidDemo.vue
+++ b/src/views/invalid/InvalidDemo.vue
@@ -49,7 +49,7 @@
             </div>
         </div>
 
-        <AppDoc name="InvalidDemo" :sources="sources" service="CountryService" data="countries" />
+        <AppDoc name="InvalidDemo" :sources="sources" service="CountryService" :data="['countries']" />
     </div>
 </template>
 
diff --git a/src/views/overlaypanel/OverlayPanelDoc.vue b/src/views/overlaypanel/OverlayPanelDoc.vue
index 0d96de066..5405990ec 100755
--- a/src/views/overlaypanel/OverlayPanelDoc.vue
+++ b/src/views/overlaypanel/OverlayPanelDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="OverlayPanelDemo" :sources="sources" service="ProductService" data="products-small">
+	<AppDoc name="OverlayPanelDemo" :sources="sources" service="ProductService" :data="['products-small']">
         <h5>Import</h5>
 <pre v-code.script><code>
 import OverlayPanel from 'primevue/overlaypanel';