Problems with composite component

I’m testing vue-gwt with very simple test case. And there are some strange things I cannot figure out.

@Component
public class BoilingVerdict extends VueComponent {
    @Prop @JsProperty String celsius;

    @JsMethod double parseFloat(String value) {
        if (value == null) return 0;
        String s = value.trim();
        if (s.isEmpty()) return 0;
        try {
            return Double.parseDouble(s);
        } catch (Exception e) {
            return 0;
        }
    }
}

BoilingVerdict.html

<p v-if="parseFloat(celsius) >= 100">The water would boil.</p>
<p v-else>The water would not boil.</p>

@Component
public class TemperatureInput extends VueComponent {
    @Prop @JsProperty String value;
    @Prop @JsProperty String scale;

    private static final Map<String, String> scaleNames = new HashMap<String, String>() {{
        put("c", "Celsius");
        put("f", "Fahrenheit");
    }};

    @Computed public void setVal(String val) {
        this.$emit("input", val);
    }

    @Computed public String getVal() {
        return value;
    }

    @Computed public String getScaleName() {
      return scaleNames.get(scale);
    }
}

TemperatureInput.html

<fieldset>
  <legend>Enter temperature in {{scaleName}}:</legend>
  <input v-model="val" />
</fieldset>

@Component(components = { BoilingVerdict.class, TemperatureInput.class })
public class TemperatureCalc extends VueComponent {

    @JsProperty String temperature = "";
    @JsProperty String scale = "c";

    private static final Function<Double, Double> toCelsius = fahrenheit -> (fahrenheit - 32) * 5 / 9;
    private static final Function<Double, Double> toFahrenheit = celsius -> (celsius * 9 / 5) + 32;

    private static String tryConvert(String temperature, Function<Double, Double> convert) {
      if (temperature == null || temperature.isEmpty()) return "";
      try {
        double input = Double.parseDouble(temperature);
        double output = convert.apply(input);
        double rounded = Math.round(output * 1000) / 1000;
        return String.valueOf(rounded);
      } catch (Exception e) {
          return "";
      }
    }

    @Computed public String getCelsius() {
        return "f".equals(scale) ? tryConvert(temperature, toCelsius) : temperature;
    }

    @Computed public void setCelsius(String value) {
      scale = "c";
      temperature = value;
    }

    @Computed public String getFahrenheit() {
        return "c".equals(scale) ? tryConvert(temperature, toFahrenheit) : temperature;
    }

    @Computed public void setFahrenheit(String value) {
        scale = "f";
        temperature = value;
    }
}

TemperatureCalc.html

<div>
  <div>
    <TemperatureInput scale="c" v-model="celsius" />
  </div>
  <div>
    <TemperatureInput scale="f" v-model="fahrenheit" />
  </div>
  <div>
    <BoilingVerdict :celsius="celsius" />
  </div>
</div>

First question: Why I have to put every child component to separate div?

In app class I have the following code:

    Vue.component("TemperatureInput", TemperatureInput.class);
    Vue.component("BoilingVerdict", BoilingVerdict.class);
    Vue.component("TemperatureCalc", TemperatureCalc.class);
    Vue.attach("#temperatureCalcContainer", TemperatureCalc.class);

Second question: Why I have to register all components manually?

[slavap]

@adrienbaron Thanks! Will try it in the morning.

[adrienbaron]

Great! Thanks for the details 😊! Closing the issue 😉