Dynamic cluster icons with v-for

[Chris-McQuiggan]

Hi, having a problem with how custom cluster icons are showing. For the most part it works perfectly as expected except that when stopping displaying a cluster group that has no pins/data, the last cluster group added takes on the icon properties of the one removed. The files are removed by altering the fileList variable.

A very condensed code snippet bellow:

<template>
  <l-map ...>
	  <div v-for="(fileNumber, index) in fileList"
		  <Vue2LeafletMarkerCluster :options="options(fileNumber)">
			  <l-marker ...>
			  </l-marker>
		  </Vue2LeafletMarkerCluster>
	  </div>
  </l-map>
</template>


<script>
  options(index) {
        console.log(index);
        return {
          iconCreateFunction: function(cluster) {
            var childCount = cluster.getChildCount();

            var c= " marker-cluster-";
            if (childCount < 10) {
              c += "small";
            } else if (childCount < 100) {
              c += "medium";
            } else {
              c += "large";
            }
            console.log(index);
            return new L.DivIcon({
              html: `<div><span>${childCount}</span></div>`,
              className: `marker-cluster ${c} marker-cluster-index-${index}`,
              iconSize: new L.Point(40, 40)
            });
          }
        };
      },
</script>

The first console log always outputs the correct value however, when the bug occurs, the second outputs the value of the empty file.

Steps to recreate:

1. have one file with geodata in and one without
2. load the file without the data
3. load the file with data
4. unload the file without data
5. OBSERVE cluster has the icon properties of the unloaded data (class of the remaining data has been overwritten with that of the empty data file)