Component.pm

package MyApp::Model::Components::Counter;

use Moose;
extends 'CatalystX::Components:::DisplayModel';

has count => (is=>'rw', required=>1, default=>0, live=>1); #lifecycle=>'request|session'
  
sub increment($self) {
  my $current = $self->count;
  $self->count($current++);
}

sub init {} # for first load
sub freeze {} # how to store for next load
sub thaw {} # how to get from store

__PACKAGE__->config(
  view => 'HTML::Components::Counter';  
);

package MyApp::View::Components::Counter;

use Moose;
extends 'CatalystX::Components:::View';

sub render($self) {
  return $self->view;
}

__DATA__
<div>
  <button live:click='increment'>Increment</button>
  <h1><%= $count %></h1>
</div>

=====. EXAMPLE TWO=====

package MyApp::Controller::UserRegistration;

use Moose;
use CatalystX::ComponentController;

has user => (
  is => 'rw',
  required => 1,
  default => sub { $c->model('Schema::User')->new_registration }
);

has message => (is=>'rw', required=>1, default=>'');

sub register :POST('UserRegistration::RegisterBody') ($self, $c, $register_body) {
  $self->user->set_from_request($register_body)
  if($self->user->valid) {
    $self->message("User Registered");
  }
}

sub render($self) {
  return $self->view;
}

another approach is to allow you to just tag inside existing template (don't define the html as part of the componen)

  <div live:component="Counter">
    <button live:click='increment'>Increment</button>
    <h1 live:content="count">1</h1>
  </div>

%= component('Counter');

<live:Counter/>