diff --git a/README.md b/README.md
index 7648ea9..5f90fc4 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,8 @@ Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev
 	tparpage=[15,25,50,'Tous'],
 	champcsv="search",
 	delimitercsv=";",
+	urlvuebloc=spip.php?page=mon_bloc_type_html,
+	vueblocdefaut='bloc ou tableau', // par defaut tableau
 	namecsv="souscripteurs.csv",
 	url_sort_asc="#CHEMIN{...}"
 	url_sort_desc="#CHEMIN{...}"
diff --git a/css/gamutable.css b/css/gamutable.css
index 795f7cf..d3018e7 100644
--- a/css/gamutable.css
+++ b/css/gamutable.css
@@ -1,3 +1,8 @@
+.gamutable--surTable select,
+.gamutable--surTable input {
+  margin-bottom: 0;
+}
+
 .gamutable--sousTable {
   display: -ms-flexbox;
   display: flex;
@@ -51,10 +56,6 @@ th.icone {
   text-align: center;
 }
 
-td.icone {
-  /*padding: 0;*/
-}
-
 td.icone > * {
   width: 100%;
   display: block;
@@ -78,4 +79,18 @@ td.icone i {
   font-size: 1.8rem;
 }
 
+.vueBlocs {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+
+.vueBlocs-unbloc {
+  width: 23%;
+  border: 1px solid #cecece;
+  margin-bottom: 1rem;
+  margin-right: 1rem;
+}
+
 /*# sourceMappingURL=gamutable.css.map */
diff --git a/css/gamutable.css.map b/css/gamutable.css.map
index 3900c9b..adf0a1b 100644
--- a/css/gamutable.css.map
+++ b/css/gamutable.css.map
@@ -1 +1 @@
-{"version":3,"sources":["gamutable.scss","gamutable.css"],"names":[],"mappings":"AAAA;EACC,oBAAa;EAAb,aAAa;EACb,sBAA8B;MAA9B,8BAA8B;ACC/B;;ADCA;EACC,oBAAa;EAAb,aAAa;ACEd;;ADCA;EACC,eAAe;ACEhB;;ADHA;EAGE,oBAAa;EAAb,aAAa;ACIf;;ADPA;EAME,oBAAY;MAAZ,YAAY;ACKd;;ADXA;EASE,YAAY;EACZ,WAAW;ACMb;;ADhBA;EAcE,eAAe;EACf,aAAa;ACMf;;ADrBA;EAkBE,UAAU;ACOZ;;ADJA;EACC,0CAA0C;ACO3C;;ADJA;EACC,eAAe;ACOhB;;ADJA;EACC,WAAW;EACX,kBAAkB;ACOnB;;ADLA;EACC,cAAA;ACQD;;ADLA;EACC,WAAW;EACX,cAAc;EACd,eAAe;EACf,kBAAkB;ACQnB;;ADNA;EACC,eAAe;EACf,qBAAqB;EACrB,yBAAyB;EACzB,yBAAyB;EACzB,kBAAkB;ACSnB;;ADdA;EAOE,yBAAyB;ACW3B;;ADPA;EACC,iBAAiB;ACUlB","file":"gamutable.css","sourcesContent":[".gamutable--sousTable {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n.gamutable--pagination {\n\tdisplay: flex;\n}\n\n.gamutable table {\n\tfont-size: 1rem;\n\tth > div {\n\t\tdisplay: flex;\n\t}\n\t.label_tete_colonne {\n\t\tflex-grow: 1;\n\t}\n\t.iconeTri {\n\t\tfloat: right;\n\t\twidth: 1rem;\n\t\t//position: relative;\n\t}\n\t.tri_col {\n\t\tcursor: pointer;\n\t\tfill: #cecece;\n\t}\n\t.iconeTri > .active {\n\t\tfill: #000;\n\t}\n}\n#app .select {\n\tbackground-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n\tcursor: pointer;\n}\n\nth.icone {\n\twidth: 30px;\n\ttext-align: center;\n}\ntd.icone {\n\t/*padding: 0;*/\n}\n\ntd.icone > * {\n\twidth: 100%;\n\tdisplay: block;\n\tpadding: 0.5rem;\n\ttext-align: center;\n}\ndiv.gamutable .url_action {\n\tpadding: 0.2rem;\n\tdisplay: inline-block;\n\tbackground-color: #f5f5f5;\n\tborder: 1px solid #cecece;\n\tborder-radius: 5px;\n\t&:hover {\n\t\tbackground-color: #cecece;\n\t}\n}\n\ntd.icone i {\n\tfont-size: 1.8rem;\n}\n",".gamutable--sousTable {\n  display: flex;\n  justify-content: space-between;\n}\n\n.gamutable--pagination {\n  display: flex;\n}\n\n.gamutable table {\n  font-size: 1rem;\n}\n\n.gamutable table th > div {\n  display: flex;\n}\n\n.gamutable table .label_tete_colonne {\n  flex-grow: 1;\n}\n\n.gamutable table .iconeTri {\n  float: right;\n  width: 1rem;\n}\n\n.gamutable table .tri_col {\n  cursor: pointer;\n  fill: #cecece;\n}\n\n.gamutable table .iconeTri > .active {\n  fill: #000;\n}\n\n#app .select {\n  background-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n  cursor: pointer;\n}\n\nth.icone {\n  width: 30px;\n  text-align: center;\n}\n\ntd.icone {\n  /*padding: 0;*/\n}\n\ntd.icone > * {\n  width: 100%;\n  display: block;\n  padding: 0.5rem;\n  text-align: center;\n}\n\ndiv.gamutable .url_action {\n  padding: 0.2rem;\n  display: inline-block;\n  background-color: #f5f5f5;\n  border: 1px solid #cecece;\n  border-radius: 5px;\n}\n\ndiv.gamutable .url_action:hover {\n  background-color: #cecece;\n}\n\ntd.icone i {\n  font-size: 1.8rem;\n}\n"]}
\ No newline at end of file
+{"version":3,"sources":["gamutable.scss","gamutable.css"],"names":[],"mappings":"AAAA;;EAGE,gBAAgB;ACAlB;;ADGA;EACC,oBAAa;EAAb,aAAa;EACb,sBAA8B;MAA9B,8BAA8B;ACA/B;;ADEA;EACC,oBAAa;EAAb,aAAa;ACCd;;ADEA;EACC,eAAe;ACChB;;ADFA;EAGE,oBAAa;EAAb,aAAa;ACGf;;ADNA;EAME,oBAAY;MAAZ,YAAY;ACId;;ADVA;EASE,YAAY;EACZ,WAAW;ACKb;;ADfA;EAcE,eAAe;EACf,aAAa;ACKf;;ADpBA;EAkBE,UAAU;ACMZ;;ADHA;EACC,0CAA0C;ACM3C;;ADHA;EACC,eAAe;ACMhB;;ADHA;EACC,WAAW;EACX,kBAAkB;ACMnB;;ADHA;EACC,WAAW;EACX,cAAc;EACd,eAAe;EACf,kBAAkB;ACMnB;;ADJA;EACC,eAAe;EACf,qBAAqB;EACrB,yBAAyB;EACzB,yBAAyB;EACzB,kBAAkB;ACOnB;;ADZA;EAOE,yBAAyB;ACS3B;;ADLA;EACC,iBAAiB;ACQlB;;ADLA;EACC,oBAAa;EAAb,aAAa;EACb,mBAAe;MAAf,eAAe;ACQhB;;ADNA;EACC,UAAU;EACV,yBAAyB;EACzB,mBAAmB;EACnB,kBAAkB;ACSnB","file":"gamutable.css","sourcesContent":[".gamutable--surTable {\n\tselect,\n\tinput {\n\t\tmargin-bottom: 0;\n\t}\n}\n.gamutable--sousTable {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n.gamutable--pagination {\n\tdisplay: flex;\n}\n\n.gamutable table {\n\tfont-size: 1rem;\n\tth > div {\n\t\tdisplay: flex;\n\t}\n\t.label_tete_colonne {\n\t\tflex-grow: 1;\n\t}\n\t.iconeTri {\n\t\tfloat: right;\n\t\twidth: 1rem;\n\t\t//position: relative;\n\t}\n\t.tri_col {\n\t\tcursor: pointer;\n\t\tfill: #cecece;\n\t}\n\t.iconeTri > .active {\n\t\tfill: #000;\n\t}\n}\n#app .select {\n\tbackground-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n\tcursor: pointer;\n}\n\nth.icone {\n\twidth: 30px;\n\ttext-align: center;\n}\n\ntd.icone > * {\n\twidth: 100%;\n\tdisplay: block;\n\tpadding: 0.5rem;\n\ttext-align: center;\n}\ndiv.gamutable .url_action {\n\tpadding: 0.2rem;\n\tdisplay: inline-block;\n\tbackground-color: #f5f5f5;\n\tborder: 1px solid #cecece;\n\tborder-radius: 5px;\n\t&:hover {\n\t\tbackground-color: #cecece;\n\t}\n}\n\ntd.icone i {\n\tfont-size: 1.8rem;\n}\n\n.vueBlocs {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n.vueBlocs-unbloc {\n\twidth: 23%;\n\tborder: 1px solid #cecece;\n\tmargin-bottom: 1rem;\n\tmargin-right: 1rem;\n}\n",".gamutable--surTable select,\n.gamutable--surTable input {\n  margin-bottom: 0;\n}\n\n.gamutable--sousTable {\n  display: flex;\n  justify-content: space-between;\n}\n\n.gamutable--pagination {\n  display: flex;\n}\n\n.gamutable table {\n  font-size: 1rem;\n}\n\n.gamutable table th > div {\n  display: flex;\n}\n\n.gamutable table .label_tete_colonne {\n  flex-grow: 1;\n}\n\n.gamutable table .iconeTri {\n  float: right;\n  width: 1rem;\n}\n\n.gamutable table .tri_col {\n  cursor: pointer;\n  fill: #cecece;\n}\n\n.gamutable table .iconeTri > .active {\n  fill: #000;\n}\n\n#app .select {\n  background-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n  cursor: pointer;\n}\n\nth.icone {\n  width: 30px;\n  text-align: center;\n}\n\ntd.icone > * {\n  width: 100%;\n  display: block;\n  padding: 0.5rem;\n  text-align: center;\n}\n\ndiv.gamutable .url_action {\n  padding: 0.2rem;\n  display: inline-block;\n  background-color: #f5f5f5;\n  border: 1px solid #cecece;\n  border-radius: 5px;\n}\n\ndiv.gamutable .url_action:hover {\n  background-color: #cecece;\n}\n\ntd.icone i {\n  font-size: 1.8rem;\n}\n\n.vueBlocs {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.vueBlocs-unbloc {\n  width: 23%;\n  border: 1px solid #cecece;\n  margin-bottom: 1rem;\n  margin-right: 1rem;\n}\n"]}
\ No newline at end of file
diff --git a/css/gamutable.scss b/css/gamutable.scss
index 9d8282d..08b225d 100644
--- a/css/gamutable.scss
+++ b/css/gamutable.scss
@@ -1,3 +1,9 @@
+.gamutable--surTable {
+	select,
+	input {
+		margin-bottom: 0;
+	}
+}
 .gamutable--sousTable {
 	display: flex;
 	justify-content: space-between;
@@ -39,9 +45,6 @@ th.icone {
 	width: 30px;
 	text-align: center;
 }
-td.icone {
-	/*padding: 0;*/
-}
 
 td.icone > * {
 	width: 100%;
@@ -63,3 +66,14 @@ div.gamutable .url_action {
 td.icone i {
 	font-size: 1.8rem;
 }
+
+.vueBlocs {
+	display: flex;
+	flex-wrap: wrap;
+}
+.vueBlocs-unbloc {
+	width: 23%;
+	border: 1px solid #cecece;
+	margin-bottom: 1rem;
+	margin-right: 1rem;
+}
diff --git a/inclure/gamutable.html b/inclure/gamutable.html
index 1b69e00..82203c0 100644
--- a/inclure/gamutable.html
+++ b/inclure/gamutable.html
@@ -3,16 +3,39 @@
 [(#SET{sort_desc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_desc]})]
 <span class="crayon xxxx-yyyy-nn"></span>
 <div id="app">
-	<mon-tableau
-		apiuri="#ENV{apiuri,spip.php?page=json_gamutable.json}"
-		:tparpage="#ENV{tparpage, [10, 20, 50, 'Tous']}"
-		champcsv="#ENV{champcsv,html}"
-		delimitercsv="#ENV{delimitercsv,','}"
-		namecsv="#ENV{namecsv,export.csv}"
-		url_sort_asc="#ENV{sort_asc,#GET{sort_asc}}"
-		url_sort_desc="#ENV{sort_desc,#GET{sort_desc}}"
-		ref="montableau"
-	></mon-tableau>
+	<div class="gamutableUn">
+		[<span class="titre titreGamutableUn">(#ENV{titreGamutableUn})</span>]
+		<mon-tableau
+			apiuri="#ENV{apiuri,spip.php?page=json_gamutable.json}"
+			:tparpage="#ENV{tparpage, [10, 20, 50, 'Tous']}"
+			champcsv="#ENV{champcsv,html}"
+			delimitercsv="#ENV{delimitercsv,','}"
+			namecsv="#ENV{namecsv}"
+			urlvuebloc="[(#ENV{urlvuebloc})]"
+			url_sort_asc="#ENV{sort_asc,#GET{sort_asc}}"
+			url_sort_desc="#ENV{sort_desc,#GET{sort_desc}}"
+			ref="montableau"
+		></mon-tableau>
+	</div>
+
+	<BOUCLE_deux(CONDITION){si #ENV{apiuri_deux}|oui}>
+		<span class="gamutableSep"></span>
+
+		<div class="gamutableDeux">
+			[<span class="titre titreGamutableDeux">(#ENV{titreGamutableDeux})</span>]
+			<mon-tableau
+				apiuri="[(#ENV{apiuri_deux})]"
+				:tparpage="#ENV{tparpage_deux, [10, 20, 50, 'Tous']}"
+				champcsv="[(#ENV{champcsv,html})]"
+				delimitercsv="[(#ENV{delimitercsv,','})]"
+				namecsv="[(#ENV{namecsv_deux})]"
+				urlvuebloc="[(#ENV{urlvuebloc_deux})]"
+				url_sort_asc="[(#ENV{sort_asc,#GET{sort_asc}})]"
+				url_sort_desc="[(#ENV{sort_desc,#GET{sort_desc}})]"
+				ref="montableau"
+				></mon-tableau>
+		</div>
+	</BOUCLE_deux>
 </div>
 
 <script type="text/javascript">
diff --git a/js/gamutable.es6.js b/js/gamutable.es6.js
index f516db2..6d6bdd8 100644
--- a/js/gamutable.es6.js
+++ b/js/gamutable.es6.js
@@ -12,6 +12,7 @@ jQuery(function () {
 		}
 		let url = $(this).attr('href');
 		let id = $(this).data('id');
+		let nomBlocAjaxReload = $(this).data('ajaxreload');
 		console.time('Chargement de VueJs APRES Ajax');
 		$.ajax({
 			url: url,
@@ -25,9 +26,7 @@ jQuery(function () {
 			if (nomBlocAjaxReload !== undefined) {
 				ajaxReload(nomBlocAjaxReload, {
 					args: { id },
-					callback: function () {
-						console.log('couco reload');
-					},
+					callback: function () {},
 				});
 			}
 		});
@@ -146,7 +145,6 @@ function trouver_index(table, id) {
 	});
 	return i;
 }
-
 let monTableau = {
 	props: {
 		tparpage: {
@@ -174,6 +172,13 @@ let monTableau = {
 		url_sort_desc: {
 			type: String,
 		},
+		urlvuebloc: {
+			type: String,
+		},
+		vueblocdefaut: {
+			type: String,
+			default: 'tableau',
+		},
 	},
 	data: function () {
 		return {
@@ -192,10 +197,19 @@ let monTableau = {
 			champ_search: 'html',
 			chargement: true,
 			nameLocalStorage: this.calculer_nameLocalStorage(),
+			quelleVue: this.vueblocdefaut,
+			vuebloc: '',
 		};
 	},
 	mounted() {
 		this.chargerJson();
+		if (this.urlvuebloc) {
+			fetch(this.urlvuebloc)
+				.then((response) => response.text())
+				.then((data) => {
+					this.vuebloc = data;
+				});
+		}
 	},
 	computed: {
 		tableau: function () {
@@ -241,7 +255,10 @@ let monTableau = {
 	},
 	methods: {
 		calculer_nameLocalStorage() {
-			return this.apiuri.match(/.*page=(.*)/)[1];
+			if (this.apiuri) {
+				return this.apiuri.match(/.*page=(.*)/)[1];
+			}
+			return '';
 		},
 		chargerJson(id) {
 			let url = this.apiuri;
@@ -283,7 +300,6 @@ let monTableau = {
 							this.table[i] = data[0];
 						} else {
 							let i = trouver_index(this.table, id);
-							console.log('index ', i);
 							this.table.splice(i, 1);
 						}
 					} else {
@@ -380,6 +396,16 @@ let monTableau = {
 			$csv = [[...$header], ...$tableau];
 			exporterCSV($csv, this.delimitercsv, this.namecsv);
 		},
+		replaceBloc(ligne) {
+			let html = this.vuebloc;
+			Object.keys(ligne).forEach((key) => {
+				html = html.replace(`@@${key}@@`, ligne[key]);
+			});
+			return html;
+		},
+		changerVue(vue) {
+			this.quelleVue = vue;
+		},
 	},
 	template: `
 	<div class="gamutable">
@@ -388,45 +414,66 @@ let monTableau = {
 				<option v-for="v in tparpage" :key="v">{{v}}</option>
 			</select>
 			<input class="gamutable--rechercher" type="text" v-model="search" placeholder="Rechercher">
-			<button class="btn gamutable--resetOrderBy" type="button" @click.stop="resetTri()">Réinitialiser les tris des colonnes</button>
+
+			<button class="btn gamutable--resetOrderBy" type="button" @click.stop="resetTri()"
+				title="Réinitialiser les tris des colonnes">
+				<i class="fa fa-repeat fas fa-redo">
+			</button>
+
+			<button class="btn gamutable--vueTable" title="Switcher en Vue tableau"
+				@click.stop="changerVue('tableau')"
+				v-if="this.vuebloc"
+				v-show="this.quelleVue === 'bloc'">
+				<i class="fas fa fa-table">
+			</button>
+
+			<button class="btn gamutable--vueBloc" title="Switcher en Vue Bloc"
+				@click.stop="changerVue('bloc')"
+				v-if="this.vuebloc"
+				v-show="this.quelleVue === 'tableau'">
+				<i class="fas fa fa-th-large">
+			</button>
 			<button class="btn gamutable--exportCSV" type="button" @click.stop="exportCSV()"
+				v-show="this.namecsv"
 				title="Exporter le tableau affiché en csv"
 			>
 				<i class="fa fa-file-excel-o fas fa-file-csv" aria-hidden="true"></i>
 			</button>
 			<span v-show="chargement" class="rouge">
 				<i class="fa fa-refresh fa-spin fa-fw rouge fas fa-sync fa-spin"></i>
-				Mise à jour de la base de donnée
+				<span class="texteMajBDD">
+					Mise à jour de la base de donnée
+				</span>
 			</span>
-			<span v-show="!chargement" class="verte">
-				<i class="fa fa-check"></i>
-				Base de données synchronisée
+			<span v-show="!chargement" class="btn verte" style="cursor:auto;"
+				title="Base de donnée synchronisée !"
+			>
+				<i class="fa fas fa-database"></i>
 			</span>
 		</div>
-		<table class="table table--zebra">
+		<div class="vueBlocs" v-if="quelleVue === 'bloc'">
+			<div class="vueBlocs-unbloc"
+			v-for="(ligne) in tableau"
+			:key=ligne.id
+			v-html=replaceBloc(ligne.html)
+			>
+			</div>
+		</div>
+		<table class="table table--zebra" v-if="quelleVue === 'tableau'">
 			<thead>
 				<tr>
 					<th v-for="(label,head,i) in header" :key="'head_'+i" :class="[head,classes[head]]">
-						<div>
-							<div class="label_tete_colonne" v-html="label" @click.stop="tri(head)"></div>
-							<div class="iconeTri">
-								<svg class="tri_col" :class="ordreActif(head, 'asc')" width="1rem" height="1rem"  @click.stop="tri(head,'asc')">
-									<title></title>
-									<use :xlink:href="url_sort_asc" />
-								</svg>
-
-								<svg class="tri_col" :class="ordreActif(head, 'desc')" width="1rem" height="1rem"  @click.stop="tri(head,'desc')">
-									<title></title>
-									<use :xlink:href="url_sort_desc" />
-								</svg>
-							</div>
-						</div>
+						<span v-html="label"></span>
+						<span class="iconeTri">
+							<i class="fa fa-sort-asc fa-sort-up" :class="ordreActif(head, 'asc')" aria-hidden="true" @click.stop="tri(head,'asc')"></i>
+							<i class="fa fa-sort-desc fa-sort-down":class="ordreActif(head, 'desc')" aria-hidden="true" @click.stop="tri(head,'desc')" ></i>
+						</span>
 					</th>
 				</tr>
 			</thead>
 			<tbody>
-				<tr v-for="l in tableau" :key="l.html.id" :id="'id_'+l.html.id" :data-id="l.html.id" :class="selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''" >
-					<td v-for="(td,name, i) in l.html" :key="'td_'+i" :class="[afficher_crayons(name,l.html.id), name, classes[name], l.classes !== undefined ? l.classes[name] : '']" v-html="td" @click="selectLigne(l.html.id,name)">
+				<tr v-for="l in tableau" :key="l.html.id" :class="selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''" >
+					<td v-for="(td,name, i) in l.html" :key="'td_'+i" :class="[afficher_crayons(name,l.html.id), name, classes[name]]" v-html="td" @click="selectLigne(l.html.id,name)">
 					</td>
 				</tr>
 			</tbody>
diff --git a/js/gamutable.js b/js/gamutable.js
index 8418bd6..171caac 100644
--- a/js/gamutable.js
+++ b/js/gamutable.js
@@ -1,18 +1,22 @@
 "use strict";
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
 
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
@@ -32,6 +36,7 @@ jQuery(function () {
 
     var url = $(this).attr('href');
     var id = $(this).data('id');
+    var nomBlocAjaxReload = $(this).data('ajaxreload');
     console.time('Chargement de VueJs APRES Ajax');
     $.ajax({
       url: url,
@@ -48,9 +53,7 @@ jQuery(function () {
           args: {
             id: id
           },
-          callback: function callback() {
-            console.log('couco reload');
-          }
+          callback: function callback() {}
         });
       }
     });
@@ -217,6 +220,13 @@ var monTableau = {
     },
     url_sort_desc: {
       type: String
+    },
+    urlvuebloc: {
+      type: String
+    },
+    vueblocdefaut: {
+      type: String,
+      default: 'tableau'
     }
   },
   data: function data() {
@@ -235,15 +245,27 @@ var monTableau = {
       selectTr: [],
       champ_search: 'html',
       chargement: true,
-      nameLocalStorage: this.calculer_nameLocalStorage()
+      nameLocalStorage: this.calculer_nameLocalStorage(),
+      quelleVue: this.vueblocdefaut,
+      vuebloc: ''
     };
   },
   mounted: function mounted() {
+    var _this = this;
+
     this.chargerJson();
+
+    if (this.urlvuebloc) {
+      fetch(this.urlvuebloc).then(function (response) {
+        return response.text();
+      }).then(function (data) {
+        _this.vuebloc = data;
+      });
+    }
   },
   computed: {
     tableau: function tableau() {
-      var _this = this;
+      var _this2 = this;
 
       this.setPages();
 
@@ -252,7 +274,7 @@ var monTableau = {
       }
 
       return this.pagination(this.table.filter(function (ligne) {
-        return Object.values(ligne[_this.champ_search]).toString().toLowerCase().indexOf(_this.search.toLowerCase()) < 0 ? false : true;
+        return Object.values(ligne[_this2.champ_search]).toString().toLowerCase().indexOf(_this2.search.toLowerCase()) < 0 ? false : true;
       }));
     }
   },
@@ -278,10 +300,14 @@ var monTableau = {
   },
   methods: {
     calculer_nameLocalStorage: function calculer_nameLocalStorage() {
-      return this.apiuri.match(/.*page=(.*)/)[1];
+      if (this.apiuri) {
+        return this.apiuri.match(/.*page=(.*)/)[1];
+      }
+
+      return '';
     },
     chargerJson: function chargerJson(id) {
-      var _this2 = this;
+      var _this3 = this;
 
       var url = this.apiuri;
 
@@ -317,40 +343,38 @@ var monTableau = {
         return response.json();
       }).then(function (data) {
         var config = data.shift();
-        _this2.header = config.header;
+        _this3.header = config.header;
 
         if (config.crayons !== undefined) {
-          _this2.crayons = config.crayons;
+          _this3.crayons = config.crayons;
         }
 
         if (config.classes !== undefined) {
-          _this2.classes = config.classes;
+          _this3.classes = config.classes;
         }
 
         if (parseInt(id) > 0) {
           if (data.length > 0) {
-            var i = trouver_index(_this2.table, id);
-            _this2.table[i] = data[0];
+            var i = trouver_index(_this3.table, id);
+            _this3.table[i] = data[0];
           } else {
-            var _i2 = trouver_index(_this2.table, id);
+            var _i2 = trouver_index(_this3.table, id);
 
-            console.log('index ', _i2);
-
-            _this2.table.splice(_i2, 1);
+            _this3.table.splice(_i2, 1);
           }
         } else {
-          _this2.table = data;
+          _this3.table = data;
 
           if (data[0] && data[0].search) {
-            _this2.champ_search = 'search';
+            _this3.champ_search = 'search';
           }
         }
 
         Vue.nextTick(function () {
-          _this2.chargement = false;
+          _this3.chargement = false;
 
           if ($_id > 0) {
-            _this2.selectLigne($_id, 'id');
+            _this3.selectLigne($_id, 'id');
 
             var _url = new URL(window.location);
 
@@ -435,7 +459,7 @@ var monTableau = {
       }
     },
     exportCSV: function exportCSV() {
-      var _this3 = this;
+      var _this4 = this;
 
       var $csv = [];
       var $header = [];
@@ -445,16 +469,26 @@ var monTableau = {
       });
       $tableau = this.tableau.reduce(function (acc, ligne) {
         var $uneLigne = [];
-        Object.values(ligne[_this3.champcsv]).forEach(function (l) {
+        Object.values(ligne[_this4.champcsv]).forEach(function (l) {
           return $uneLigne.push(l);
         });
         return [].concat(_toConsumableArray(acc), [[].concat($uneLigne)]);
       }, []);
       $csv = [[].concat($header)].concat(_toConsumableArray($tableau));
       exporterCSV($csv, this.delimitercsv, this.namecsv);
+    },
+    replaceBloc: function replaceBloc(ligne) {
+      var html = this.vuebloc;
+      Object.keys(ligne).forEach(function (key) {
+        html = html.replace("@@".concat(key, "@@"), ligne[key]);
+      });
+      return html;
+    },
+    changerVue: function changerVue(vue) {
+      this.quelleVue = vue;
     }
   },
-  template: "\n\t<div class=\"gamutable\">\n\t\t<div class=\"gamutable--surTable\">\n\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t</select>\n\t\t\t<input class=\"gamutable--rechercher\" type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\t\t\t<button class=\"btn gamutable--resetOrderBy\" type=\"button\" @click.stop=\"resetTri()\">R\xE9initialiser les tris des colonnes</button>\n\t\t\t<button class=\"btn gamutable--exportCSV\" type=\"button\" @click.stop=\"exportCSV()\"\n\t\t\t\ttitle=\"Exporter le tableau affich\xE9 en csv\"\n\t\t\t>\n\t\t\t\t<i class=\"fa fa-file-excel-o fas fa-file-csv\" aria-hidden=\"true\"></i>\n\t\t\t</button>\n\t\t\t<span v-show=\"chargement\" class=\"rouge\">\n\t\t\t\t<i class=\"fa fa-refresh fa-spin fa-fw rouge fas fa-sync fa-spin\"></i>\n\t\t\t\tMise \xE0 jour de la base de donn\xE9e\n\t\t\t</span>\n\t\t\t<span v-show=\"!chargement\" class=\"verte\">\n\t\t\t\t<i class=\"fa fa-check\"></i>\n\t\t\t\tBase de donn\xE9es synchronis\xE9e\n\t\t\t</span>\n\t\t</div>\n\t\t<table class=\"table table--zebra\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'head_'+i\" :class=\"[head,classes[head]]\">\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<div class=\"label_tete_colonne\" v-html=\"label\" @click.stop=\"tri(head)\"></div>\n\t\t\t\t\t\t\t<div class=\"iconeTri\">\n\t\t\t\t\t\t\t\t<svg class=\"tri_col\" :class=\"ordreActif(head, 'asc')\" width=\"1rem\" height=\"1rem\"  @click.stop=\"tri(head,'asc')\">\n\t\t\t\t\t\t\t\t\t<title></title>\n\t\t\t\t\t\t\t\t\t<use :xlink:href=\"url_sort_asc\" />\n\t\t\t\t\t\t\t\t</svg>\n\n\t\t\t\t\t\t\t\t<svg class=\"tri_col\" :class=\"ordreActif(head, 'desc')\" width=\"1rem\" height=\"1rem\"  @click.stop=\"tri(head,'desc')\">\n\t\t\t\t\t\t\t\t\t<title></title>\n\t\t\t\t\t\t\t\t\t<use :xlink:href=\"url_sort_desc\" />\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.html.id\" :id=\"'id_'+l.html.id\" :data-id=\"l.html.id\" :class=\"selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''\" >\n\t\t\t\t\t<td v-for=\"(td,name, i) in l.html\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.html.id), name, classes[name], l.classes !== undefined ? l.classes[name] : '']\" v-html=\"td\" @click=\"selectLigne(l.html.id,name)\">\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t\t<div class=\"gamutable--sousTable\">\n\t\t\t<div class=\"gamutable-nbrMax\">{{tableau.length}} / {{table.length}} \xE9l\xE9ments</div>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"
+  template: "\n\t<div class=\"gamutable\">\n\t\t<div class=\"gamutable--surTable\">\n\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t</select>\n\t\t\t<input class=\"gamutable--rechercher\" type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\n\t\t\t<button class=\"btn gamutable--resetOrderBy\" type=\"button\" @click.stop=\"resetTri()\"\n\t\t\t\ttitle=\"R\xE9initialiser les tris des colonnes\">\n\t\t\t\t<i class=\"fa fa-repeat fas fa-redo\">\n\t\t\t</button>\n\n\t\t\t<button class=\"btn gamutable--vueTable\" title=\"Switcher en Vue tableau\"\n\t\t\t\t@click.stop=\"changerVue('tableau')\"\n\t\t\t\tv-if=\"this.vuebloc\"\n\t\t\t\tv-show=\"this.quelleVue === 'bloc'\">\n\t\t\t\t<i class=\"fas fa fa-table\">\n\t\t\t</button>\n\n\t\t\t<button class=\"btn gamutable--vueBloc\" title=\"Switcher en Vue Bloc\"\n\t\t\t\t@click.stop=\"changerVue('bloc')\"\n\t\t\t\tv-if=\"this.vuebloc\"\n\t\t\t\tv-show=\"this.quelleVue === 'tableau'\">\n\t\t\t\t<i class=\"fas fa fa-th-large\">\n\t\t\t</button>\n\t\t\t<button class=\"btn gamutable--exportCSV\" type=\"button\" @click.stop=\"exportCSV()\"\n\t\t\t\tv-show=\"this.namecsv\"\n\t\t\t\ttitle=\"Exporter le tableau affich\xE9 en csv\"\n\t\t\t>\n\t\t\t\t<i class=\"fa fa-file-excel-o fas fa-file-csv\" aria-hidden=\"true\"></i>\n\t\t\t</button>\n\t\t\t<span v-show=\"chargement\" class=\"rouge\">\n\t\t\t\t<i class=\"fa fa-refresh fa-spin fa-fw rouge fas fa-sync fa-spin\"></i>\n\t\t\t\t<span class=\"texteMajBDD\">\n\t\t\t\t\tMise \xE0 jour de la base de donn\xE9e\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t\t<span v-show=\"!chargement\" class=\"btn verte\" style=\"cursor:auto;\"\n\t\t\t\ttitle=\"Base de donn\xE9e synchronis\xE9e !\"\n\t\t\t>\n\t\t\t\t<i class=\"fa fas fa-database\"></i>\n\t\t\t</span>\n\t\t</div>\n\t\t<div class=\"vueBlocs\" v-if=\"quelleVue === 'bloc'\">\n\t\t\t<div class=\"vueBlocs-unbloc\"\n\t\t\tv-for=\"(ligne) in tableau\"\n\t\t\t:key=ligne.id\n\t\t\tv-html=replaceBloc(ligne.html)\n\t\t\t>\n\t\t\t</div>\n\t\t</div>\n\t\t<table class=\"table table--zebra\" v-if=\"quelleVue === 'tableau'\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'head_'+i\" :class=\"[head,classes[head]]\">\n\t\t\t\t\t\t<span v-html=\"label\"></span>\n\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-asc fa-sort-up\" :class=\"ordreActif(head, 'asc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'asc')\"></i>\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-desc fa-sort-down\":class=\"ordreActif(head, 'desc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'desc')\" ></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.html.id\" :class=\"selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''\" >\n\t\t\t\t\t<td v-for=\"(td,name, i) in l.html\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.html.id), name, classes[name]]\" v-html=\"td\" @click=\"selectLigne(l.html.id,name)\">\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t\t<div class=\"gamutable--sousTable\">\n\t\t\t<div class=\"gamutable-nbrMax\">{{tableau.length}} / {{table.length}} \xE9l\xE9ments</div>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"
 };
 var gamuTable = {
   components: {
diff --git a/js/vue.js b/js/vue.js
index 0bc15a4..9cab498 100644
--- a/js/vue.js
+++ b/js/vue.js
@@ -252,7 +252,7 @@ var Vue = (function (exports) {
 
   const EMPTY_OBJ =  Object.freeze({})
       ;
-  const EMPTY_ARR = [];
+  const EMPTY_ARR =  Object.freeze([]) ;
   const NOOP = () => { };
   /**
    * Always return false.
@@ -292,7 +292,9 @@ var Vue = (function (exports) {
       key !== 'NaN' &&
       key[0] !== '-' &&
       '' + parseInt(key, 10) === key;
-  const isReservedProp = /*#__PURE__*/ makeMap('key,ref,' +
+  const isReservedProp = /*#__PURE__*/ makeMap(
+  // the leading comma is intentional so empty string "" is also included
+  ',key,ref,' +
       'onVnodeBeforeMount,onVnodeMounted,' +
       'onVnodeBeforeUpdate,onVnodeUpdated,' +
       'onVnodeBeforeUnmount,onVnodeUnmounted');
@@ -314,15 +316,15 @@ var Vue = (function (exports) {
   /**
    * @private
    */
-  const hyphenate = cacheStringFunction((str) => {
-      return str.replace(hyphenateRE, '-$1').toLowerCase();
-  });
+  const hyphenate = cacheStringFunction((str) => str.replace(hyphenateRE, '-$1').toLowerCase());
   /**
    * @private
    */
-  const capitalize = cacheStringFunction((str) => {
-      return str.charAt(0).toUpperCase() + str.slice(1);
-  });
+  const capitalize = cacheStringFunction((str) => str.charAt(0).toUpperCase() + str.slice(1));
+  /**
+   * @private
+   */
+  const toHandlerKey = cacheStringFunction((str) => (str ? `on${capitalize(str)}` : ``));
   // compare whether a value has changed, accounting for NaN.
   const hasChanged = (value, oldValue) => value !== oldValue && (value === value || oldValue === oldValue);
   const invokeArrayFns = (fns, arg) => {
@@ -667,7 +669,7 @@ var Vue = (function (exports) {
       return result;
   }
   function ownKeys(target) {
-      track(target, "iterate" /* ITERATE */, ITERATE_KEY);
+      track(target, "iterate" /* ITERATE */, isArray(target) ? 'length' : ITERATE_KEY);
       return Reflect.ownKeys(target);
   }
   const mutableHandlers = {
@@ -1739,21 +1741,21 @@ var Vue = (function (exports) {
       exports.devtools.emit("component:emit" /* COMPONENT_EMIT */, component.appContext.app, component, event, params);
   }
 
-  function emit(instance, event, ...args) {
+  function emit(instance, event, ...rawArgs) {
       const props = instance.vnode.props || EMPTY_OBJ;
       {
           const { emitsOptions, propsOptions: [propsOptions] } = instance;
           if (emitsOptions) {
               if (!(event in emitsOptions)) {
-                  if (!propsOptions || !(`on` + capitalize(event) in propsOptions)) {
+                  if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {
                       warn(`Component emitted event "${event}" but it is neither declared in ` +
-                          `the emits option nor as an "on${capitalize(event)}" prop.`);
+                          `the emits option nor as an "${toHandlerKey(event)}" prop.`);
                   }
               }
               else {
                   const validator = emitsOptions[event];
                   if (isFunction(validator)) {
-                      const isValid = validator(...args);
+                      const isValid = validator(...rawArgs);
                       if (!isValid) {
                           warn(`Invalid event arguments: event validation failed for event "${event}".`);
                       }
@@ -1761,12 +1763,26 @@ var Vue = (function (exports) {
               }
           }
       }
+      let args = rawArgs;
+      const isModelListener = event.startsWith('update:');
+      // for v-model update:xxx events, apply modifiers on args
+      const modelArg = isModelListener && event.slice(7);
+      if (modelArg && modelArg in props) {
+          const modifiersKey = `${modelArg === 'modelValue' ? 'model' : modelArg}Modifiers`;
+          const { number, trim } = props[modifiersKey] || EMPTY_OBJ;
+          if (trim) {
+              args = rawArgs.map(a => a.trim());
+          }
+          else if (number) {
+              args = rawArgs.map(toNumber);
+          }
+      }
       {
           devtoolsComponentEmit(instance, event, args);
       }
       {
           const lowerCaseEvent = event.toLowerCase();
-          if (lowerCaseEvent !== event && props[`on` + capitalize(lowerCaseEvent)]) {
+          if (lowerCaseEvent !== event && props[toHandlerKey(lowerCaseEvent)]) {
               warn(`Event "${lowerCaseEvent}" is emitted in component ` +
                   `${formatComponentName(instance, instance.type)} but the handler is registered for "${event}". ` +
                   `Note that HTML attributes are case-insensitive and you cannot use ` +
@@ -1775,25 +1791,26 @@ var Vue = (function (exports) {
           }
       }
       // convert handler name to camelCase. See issue #2249
-      let handlerName = `on${capitalize(camelize(event))}`;
+      let handlerName = toHandlerKey(camelize(event));
       let handler = props[handlerName];
       // for v-model update:xxx events, also trigger kebab-case equivalent
       // for props passed via kebab-case
-      if (!handler && event.startsWith('update:')) {
-          handlerName = `on${capitalize(hyphenate(event))}`;
+      if (!handler && isModelListener) {
+          handlerName = toHandlerKey(hyphenate(event));
           handler = props[handlerName];
       }
-      if (!handler) {
-          handler = props[handlerName + `Once`];
+      if (handler) {
+          callWithAsyncErrorHandling(handler, instance, 6 /* COMPONENT_EVENT_HANDLER */, args);
+      }
+      const onceHandler = props[handlerName + `Once`];
+      if (onceHandler) {
           if (!instance.emitted) {
               (instance.emitted = {})[handlerName] = true;
           }
           else if (instance.emitted[handlerName]) {
               return;
           }
-      }
-      if (handler) {
-          callWithAsyncErrorHandling(handler, instance, 6 /* COMPONENT_EVENT_HANDLER */, args);
+          callWithAsyncErrorHandling(onceHandler, instance, 6 /* COMPONENT_EVENT_HANDLER */, args);
       }
   }
   function normalizeEmitsOptions(comp, appContext, asMixin = false) {
@@ -2003,11 +2020,13 @@ var Vue = (function (exports) {
       const dynamicIndex = dynamicChildren ? dynamicChildren.indexOf(childRoot) : -1;
       const setRoot = (updatedRoot) => {
           rawChildren[index] = updatedRoot;
-          if (dynamicIndex > -1) {
-              dynamicChildren[dynamicIndex] = updatedRoot;
-          }
-          else if (dynamicChildren && updatedRoot.patchFlag > 0) {
-              dynamicChildren.push(updatedRoot);
+          if (dynamicChildren) {
+              if (dynamicIndex > -1) {
+                  dynamicChildren[dynamicIndex] = updatedRoot;
+              }
+              else if (updatedRoot.patchFlag > 0) {
+                  vnode.dynamicChildren = [...dynamicChildren, updatedRoot];
+              }
           }
       };
       return [normalizeVNode(childRoot), setRoot];
@@ -2145,7 +2164,7 @@ var Vue = (function (exports) {
               mountSuspense(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, rendererInternals);
           }
           else {
-              patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, optimized, rendererInternals);
+              patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, rendererInternals);
           }
       },
       hydrate: hydrateSuspense,
@@ -2159,13 +2178,13 @@ var Vue = (function (exports) {
       const hiddenContainer = createElement('div');
       const suspense = (vnode.suspense = createSuspenseBoundary(vnode, parentSuspense, parentComponent, container, hiddenContainer, anchor, isSVG, optimized, rendererInternals));
       // start mounting the content subtree in an off-dom container
-      patch(null, (suspense.pendingBranch = vnode.ssContent), hiddenContainer, null, parentComponent, suspense, isSVG, optimized);
+      patch(null, (suspense.pendingBranch = vnode.ssContent), hiddenContainer, null, parentComponent, suspense, isSVG);
       // now check if we have encountered any async deps
       if (suspense.deps > 0) {
           // has async
           // mount the fallback tree
           patch(null, vnode.ssFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context
-          isSVG, optimized);
+          isSVG);
           setActiveBranch(suspense, vnode.ssFallback);
       }
       else {
@@ -2173,7 +2192,7 @@ var Vue = (function (exports) {
           suspense.resolve();
       }
   }
-  function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, optimized, { p: patch, um: unmount, o: { createElement } }) {
+  function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, { p: patch, um: unmount, o: { createElement } }) {
       const suspense = (n2.suspense = n1.suspense);
       suspense.vnode = n2;
       n2.el = n1.el;
@@ -2184,13 +2203,13 @@ var Vue = (function (exports) {
           suspense.pendingBranch = newBranch;
           if (isSameVNodeType(newBranch, pendingBranch)) {
               // same root type but content may have changed.
-              patch(pendingBranch, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, optimized);
+              patch(pendingBranch, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG);
               if (suspense.deps <= 0) {
                   suspense.resolve();
               }
               else if (isInFallback) {
                   patch(activeBranch, newFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context
-                  isSVG, optimized);
+                  isSVG);
                   setActiveBranch(suspense, newFallback);
               }
           }
@@ -2216,25 +2235,25 @@ var Vue = (function (exports) {
               suspense.hiddenContainer = createElement('div');
               if (isInFallback) {
                   // already in fallback state
-                  patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, optimized);
+                  patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG);
                   if (suspense.deps <= 0) {
                       suspense.resolve();
                   }
                   else {
                       patch(activeBranch, newFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context
-                      isSVG, optimized);
+                      isSVG);
                       setActiveBranch(suspense, newFallback);
                   }
               }
               else if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
                   // toggled "back" to current active branch
-                  patch(activeBranch, newBranch, container, anchor, parentComponent, suspense, isSVG, optimized);
+                  patch(activeBranch, newBranch, container, anchor, parentComponent, suspense, isSVG);
                   // force resolve
                   suspense.resolve(true);
               }
               else {
                   // switched to a 3rd branch
-                  patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, optimized);
+                  patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG);
                   if (suspense.deps <= 0) {
                       suspense.resolve();
                   }
@@ -2244,7 +2263,7 @@ var Vue = (function (exports) {
       else {
           if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
               // root did not change, just normal patch
-              patch(activeBranch, newBranch, container, anchor, parentComponent, suspense, isSVG, optimized);
+              patch(activeBranch, newBranch, container, anchor, parentComponent, suspense, isSVG);
               setActiveBranch(suspense, newBranch);
           }
           else {
@@ -2257,7 +2276,7 @@ var Vue = (function (exports) {
               // mount pending branch in off-dom container
               suspense.pendingBranch = newBranch;
               suspense.pendingId++;
-              patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, optimized);
+              patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG);
               if (suspense.deps <= 0) {
                   // incoming branch has no async deps, resolve now.
                   suspense.resolve();
@@ -2293,7 +2312,6 @@ var Vue = (function (exports) {
           parent,
           parentComponent,
           isSVG,
-          optimized,
           container,
           hiddenContainer,
           anchor,
@@ -2376,7 +2394,7 @@ var Vue = (function (exports) {
               if (!suspense.pendingBranch) {
                   return;
               }
-              const { vnode, activeBranch, parentComponent, container, isSVG, optimized } = suspense;
+              const { vnode, activeBranch, parentComponent, container, isSVG } = suspense;
               // invoke @fallback event
               const onFallback = vnode.props && vnode.props.onFallback;
               if (isFunction(onFallback)) {
@@ -2389,7 +2407,7 @@ var Vue = (function (exports) {
                   }
                   // mount the fallback tree
                   patch(null, fallbackVNode, container, anchor, parentComponent, null, // fallback tree will not have suspense context
-                  isSVG, optimized);
+                  isSVG);
                   setActiveBranch(suspense, fallbackVNode);
               };
               const delayEnter = fallbackVNode.transition && fallbackVNode.transition.mode === 'out-in';
@@ -3058,7 +3076,7 @@ var Vue = (function (exports) {
           return wrappedHook;
       }
       else {
-          const apiName = `on${capitalize(ErrorTypeStrings[type].replace(/ hook$/, ''))}`;
+          const apiName = toHandlerKey(ErrorTypeStrings[type].replace(/ hook$/, ''));
           warn(`${apiName} is called when there is no active component instance to be ` +
               `associated with. ` +
               `Lifecycle injection APIs can only be used during execution of setup().` +
@@ -4984,6 +5002,7 @@ var Vue = (function (exports) {
       const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) => {
           if (oldProps !== newProps) {
               for (const key in newProps) {
+                  // empty string is not valid prop
                   if (isReservedProp(key))
                       continue;
                   const next = newProps[key];
@@ -5623,7 +5642,10 @@ var Vue = (function (exports) {
                   // fast path for block nodes: only need to unmount dynamic children.
                   unmountChildren(dynamicChildren, parentComponent, parentSuspense, false, true);
               }
-              else if (!optimized && shapeFlag & 16 /* ARRAY_CHILDREN */) {
+              else if ((type === Fragment &&
+                  (patchFlag & 128 /* KEYED_FRAGMENT */ ||
+                      patchFlag & 256 /* UNKEYED_FRAGMENT */)) ||
+                  (!optimized && shapeFlag & 16 /* ARRAY_CHILDREN */)) {
                   unmountChildren(children, parentComponent, parentSuspense);
               }
               // an unmounted teleport should always remove its children if not disabled
@@ -6518,7 +6540,7 @@ var Vue = (function (exports) {
                           : incoming;
                   }
               }
-              else {
+              else if (key !== '') {
                   ret[key] = toMerge[key];
               }
           }
@@ -6552,8 +6574,13 @@ var Vue = (function (exports) {
       // a functional component
       const instance = currentInstance || currentRenderingInstance;
       if (instance) {
-          const provides = instance.provides;
-          if (key in provides) {
+          // #2400
+          // to support `app.use` plugins,
+          // fallback to appContext's `provides` if the intance is at root
+          const provides = instance.parent == null
+              ? instance.vnode.appContext && instance.vnode.appContext.provides
+              : instance.parent.provides;
+          if (provides && key in provides) {
               // TS doesn't allow symbol as index type
               return provides[key];
           }
@@ -7317,7 +7344,7 @@ var Vue = (function (exports) {
           }
       }
       // 0. create render proxy property access cache
-      instance.accessCache = {};
+      instance.accessCache = Object.create(null);
       // 1. create public instance / render proxy
       // also mark it raw so it's never observed
       instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers);
@@ -7913,7 +7940,7 @@ var Vue = (function (exports) {
           return ret;
       }
       for (const key in obj) {
-          ret[`on${capitalize(key)}`] = obj[key];
+          ret[toHandlerKey(key)] = obj[key];
       }
       return ret;
   }
@@ -7940,7 +7967,7 @@ var Vue = (function (exports) {
   }
 
   // Core API ------------------------------------------------------------------
-  const version = "3.0.1";
+  const version = "3.0.2";
   /**
    * SSR utils for \@vue/server-renderer. Only exposed in cjs builds.
    * @internal
@@ -9276,6 +9303,7 @@ var Vue = (function (exports) {
   const TO_HANDLERS = Symbol( `toHandlers` );
   const CAMELIZE = Symbol( `camelize` );
   const CAPITALIZE = Symbol( `capitalize` );
+  const TO_HANDLER_KEY = Symbol( `toHandlerKey` );
   const SET_BLOCK_TRACKING = Symbol( `setBlockTracking` );
   const PUSH_SCOPE_ID = Symbol( `pushScopeId` );
   const POP_SCOPE_ID = Symbol( `popScopeId` );
@@ -9308,6 +9336,7 @@ var Vue = (function (exports) {
       [TO_HANDLERS]: `toHandlers`,
       [CAMELIZE]: `camelize`,
       [CAPITALIZE]: `capitalize`,
+      [TO_HANDLER_KEY]: `toHandlerKey`,
       [SET_BLOCK_TRACKING]: `setBlockTracking`,
       [PUSH_SCOPE_ID]: `pushScopeId`,
       [POP_SCOPE_ID]: `popScopeId`,
@@ -9464,7 +9493,7 @@ var Vue = (function (exports) {
   }
   const nonIdentifierRE = /^\d|[^\$\w]/;
   const isSimpleIdentifier = (name) => !nonIdentifierRE.test(name);
-  const memberExpRE = /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\[[^\]]+\])*$/;
+  const memberExpRE = /^[A-Za-z_$][\w$]*(?:\s*\.\s*[A-Za-z_$][\w$]*|\[[^\]]+\])*$/;
   const isMemberExpression = (path) => {
       if (!path)
           return false;
@@ -12481,12 +12510,12 @@ var Vue = (function (exports) {
           if (arg.isStatic) {
               const rawName = arg.content;
               // for all event listeners, auto convert it to camelCase. See issue #2249
-              const normalizedName = capitalize(camelize(rawName));
-              eventName = createSimpleExpression(`on${normalizedName}`, true, arg.loc);
+              eventName = createSimpleExpression(toHandlerKey(camelize(rawName)), true, arg.loc);
           }
           else {
+              // #2388
               eventName = createCompoundExpression([
-                  `"on" + ${context.helperString(CAPITALIZE)}(`,
+                  `${context.helperString(TO_HANDLER_KEY)}(`,
                   arg,
                   `)`
               ]);
@@ -12495,7 +12524,7 @@ var Vue = (function (exports) {
       else {
           // already a compound expression.
           eventName = arg;
-          eventName.children.unshift(`"on" + ${context.helperString(CAPITALIZE)}(`);
+          eventName.children.unshift(`${context.helperString(TO_HANDLER_KEY)}(`);
           eventName.children.push(`)`);
       }
       // handler processing
@@ -12544,6 +12573,13 @@ var Vue = (function (exports) {
   const transformBind = (dir, node, context) => {
       const { exp, modifiers, loc } = dir;
       const arg = dir.arg;
+      if (arg.type !== 4 /* SIMPLE_EXPRESSION */) {
+          arg.children.unshift(`(`);
+          arg.children.push(`) || ""`);
+      }
+      else if (!arg.isStatic) {
+          arg.content = `${arg.content} || ""`;
+      }
       // .prop is no longer necessary due to new patch behavior
       // .sync is replaced by v-model:arg
       if (modifiers.includes('camel')) {
@@ -12935,7 +12971,9 @@ var Vue = (function (exports) {
       }
       return {
           props: [
-              createObjectProperty(createSimpleExpression(`textContent`, true, loc), exp || createSimpleExpression('', true))
+              createObjectProperty(createSimpleExpression(`textContent`, true), exp
+                  ? createCallExpression(context.helperString(TO_DISPLAY_STRING), [exp], loc)
+                  : createSimpleExpression('', true))
           ]
       };
   };
@@ -13337,6 +13375,7 @@ var Vue = (function (exports) {
   exports.ssrContextKey = ssrContextKey;
   exports.ssrUtils = ssrUtils;
   exports.toDisplayString = toDisplayString;
+  exports.toHandlerKey = toHandlerKey;
   exports.toHandlers = toHandlers;
   exports.toRaw = toRaw;
   exports.toRef = toRef;