how can we put two custom component on same page in AEM as a cloud service?

I have a custom component say "componentA"

->I am writing my business logic in my sling model of the component and using the fields via annotation @ValueMapValue 

->and using the properties in HTL via e.g : ${model.propertyOne}

-> But when I put two component on the same page , my HTL behaves very differently , only the latest added changes are reflecting on both my HTL and on website

-> My guess is it's happening because the model file is same and it's only picking the latest changes and passing it to the HTML 

-> How can I prevent this behavior and what steps should be taken care to use two components on the same page

Thank you