How to add text inside polygon in vue-leaflet?

I want to add text on the center of polygon feature in maps.
I was referred to the this issue. and I made code like that.

<template>
  <l-map style="height: 350px" :zoom="zoom" :center="center">
    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
    <l-polygon :lat-lngs="polygon.latlngs" :color="polygon.color">
      <l-marker
        :lat-lngs="polygonCenter(polygon.latlngs)"
        :icon="polyGonText"
      ></l-marker>
    </l-polygon>
  </l-map>
</template>

<script>
import { LMap, LTileLayer, LPolygon, LMarker } from "vue2-leaflet";
import L from "leaflet";

export default {
  components: {
    LMap,
    LTileLayer,
    LPolygon,
    LMarker,
  },
  data() {
    return {
      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      attribution:
        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 8,
      center: [47.31322, -1.319482],
      polygon: {
        latlngs: [
          [47.2263299, -1.6222],
          [47.21024000000001, -1.6270065],
          [47.1969447, -1.6136169],
          [47.18527929999999, -1.6143036],
          [47.1794457, -1.6098404],
          [47.1775788, -1.5985107],
          [47.1676598, -1.5753365],
          [47.1593731, -1.5521622],
          [47.1593731, -1.5319061],
          [47.1722111, -1.5143967],
          [47.1960115, -1.4841843],
          [47.2095404, -1.4848709],
          [47.2291277, -1.4683914],
          [47.2533687, -1.5116501],
          [47.2577961, -1.5531921],
          [47.26828069, -1.5621185],
          [47.2657179, -1.589241],
          [47.2589612, -1.6204834],
          [47.237287, -1.6266632],
          [47.2263299, -1.6222],
        ],
        color: "green",
      },
    };
  },
  methods: {
    polygonCenter(latlngs) {
      return L.polygon(latlngs).getBounds().getCenter();
    },
    polyGonText() {
      return L.divIcon({ html: "No.1" });
    },
  },
};
</script>

<style>
</style>

my sample code link

my code is referred to vue-leaflet site, and just add methods to get center of polygon “latLang” and set html object.
But html text(No.1) is not shown on the polygon.
How can I add text in to the polygon?
Does anyone help me?